/* BARAMEEL — V21.9 WORLD HUB
   Geometry is normalized to the approved artwork bounds.
*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Righteous&family=Roboto+Condensed:wght@700;900&display=swap');
:root{--teal:#0e2a3d;--yellow:#f0c830;--orange:#c2571a;--cream:#f5e9dc;--red:#d92f25;--ink:#071a20}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#061f27;color:#fff;font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif}
body{overflow-x:hidden}
button,input,select{font:inherit}
.stage,.world-stage,.world-splash-stage{position:relative;overflow:hidden;margin:0 auto;background:#061f27;isolation:isolate}
.stage{width:min(100vw,calc(100dvh*720/1280));height:min(100dvh,calc(100vw*1280/720));aspect-ratio:720/1280}
.base,.world-art,.world-splash-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;border:0;background:transparent;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
.barameel-flash{position:absolute;inset:0;z-index:999;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(240,200,48,.42),rgba(240,200,48,0) 68%);mix-blend-mode:screen}
.barameel-flash.on{animation:flash .34s ease-out both}
@keyframes flash{0%{opacity:0}30%{opacity:.75}100%{opacity:0}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* WORLD */
 .world-splash-stage{aspect-ratio:953/1651;width:min(100vw,calc(100dvh*953/1651));height:min(100dvh,calc(100vw*1651/953));background:#061f27}
.world-stage{aspect-ratio:952/1652;width:min(100vw,calc(100dvh*952/1652));height:min(100dvh,calc(100vw*1652/952))}
.world-splash-hotspot{position:absolute;inset:0;z-index:40;border:0;background:transparent;touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* SCREEN 01 — BARAMEEL WORLD SPLASH: living arcade intro. Artwork itself is untouched. */
.world-splash-stage .world-splash-art{transform:translate3d(var(--splash-x,0px),var(--splash-y,0px),0) scale(1.018);animation:splash-art-breathe 4.2s ease-in-out infinite alternate;will-change:transform;transition:transform .12s cubic-bezier(.2,.7,.2,1)}
.splash-scan-beam{position:absolute;left:-25%;top:18%;width:150%;height:7%;z-index:7;pointer-events:none;transform:rotate(-7deg);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0) 38%,rgba(255,235,143,.34) 50%,rgba(255,255,255,0) 62%,transparent 100%);mix-blend-mode:screen;filter:blur(5px);animation:splash-scan-beam 3.6s cubic-bezier(.4,0,.6,1) infinite}
.splash-energy-ring{position:absolute;left:50%;top:43%;width:34%;aspect-ratio:1;z-index:3;pointer-events:none;border:1px solid rgba(255,220,102,.28);border-radius:50%;box-shadow:0 0 28px rgba(255,188,43,.16),inset 0 0 22px rgba(20,194,211,.10);transform:translate(-50%,-50%) scale(.72);animation:splash-ring 3.8s ease-out infinite}
.splash-parallax-light{position:absolute;inset:-18%;z-index:3;pointer-events:none;background:radial-gradient(circle at var(--light-x,50%) var(--light-y,42%),rgba(255,218,94,.22) 0%,rgba(255,166,38,.09) 14%,rgba(16,205,220,.05) 28%,transparent 48%);mix-blend-mode:screen;filter:blur(8px);transform:translate3d(calc(var(--splash-x,0px)*-.45),calc(var(--splash-y,0px)*-.45),0);transition:background-position .08s linear,transform .16s ease-out;animation:splash-light-pulse 3.2s ease-in-out infinite}
.splash-world-glow{position:absolute;inset:-8%;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 39%,rgba(255,213,76,.10),transparent 33%),radial-gradient(circle at 50% 74%,rgba(18,183,208,.08),transparent 42%);mix-blend-mode:screen;animation:splash-glow 3.8s ease-in-out infinite}
.splash-logo-shine{position:absolute;z-index:4;pointer-events:none;left:19%;top:6%;width:66%;height:24%;overflow:hidden;opacity:0;animation:logo-shine 4.2s ease-in-out 1.05s infinite}
.splash-logo-shine::after{content:"";position:absolute;top:-35%;left:-45%;width:18%;height:170%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);filter:blur(1px)}
.splash-lens-shine{position:absolute;z-index:5;pointer-events:none;left:29%;top:39%;width:48%;height:16%;overflow:hidden;opacity:0;animation:lens-shine 5.2s ease-in-out 1.4s infinite}
.splash-lens-shine::after{content:"";position:absolute;top:-60%;left:calc(-35% + var(--lens-x,0%));width:10%;height:220%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);filter:blur(1px)}
.splash-grain{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");mix-blend-mode:soft-light;animation:grain-jitter .22s steps(2) infinite}
.world-loading{position:absolute;z-index:30;left:8%;right:8%;bottom:3.2%;height:7.2%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(0,0,0,.55))}
.world-loading-track{position:relative;width:72%;height:38%;padding:2.5px;border:2.5px solid #071a20;border-radius:999px;background:#f8f4ec;box-shadow:0 0 0 2px rgba(255,255,255,.8),0 3px 0 #071a20;overflow:hidden}
.world-loading-fill{position:relative;width:8%;height:100%;border-radius:999px;background:linear-gradient(90deg,#ff4a24 0%,#ff9d13 56%,#ffd94a 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 0 12px rgba(255,173,27,.32);transition:width .38s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.world-loading-sheen{position:absolute;top:-80%;left:-20%;width:16%;height:260%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);animation:loading-sheen 1.7s linear infinite;pointer-events:none}
.world-loading-label{margin-top:5px;color:#fff;font-family:'Righteous','Arial Black',Impact,sans-serif;font-size:clamp(7px,1.65vw,12px);letter-spacing:.24em;text-shadow:0 2px 0 #071a20;white-space:nowrap}
.world-ready .world-splash-art{animation:splash-ready .52s cubic-bezier(.2,.85,.2,1) both}
.world-ready .world-loading{animation:loading-pop .52s ease-out both}
.splash-activation-flash{position:absolute;inset:-10%;z-index:50;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 44%,rgba(255,247,205,.96) 0%,rgba(255,214,63,.55) 12%,rgba(255,91,33,.22) 32%,transparent 68%);mix-blend-mode:screen}
.world-ready .splash-activation-flash{animation:splash-activation .52s cubic-bezier(.15,.8,.2,1) both}
@keyframes splash-art-breathe{0%{transform:translate3d(var(--splash-x,0px),var(--splash-y,0px),0) scale(1.018)}50%{transform:translate3d(calc(var(--splash-x,0px)*.72),calc(var(--splash-y,0px) - .55%),0) scale(1.032)}100%{transform:translate3d(calc(var(--splash-x,0px)*.45),calc(var(--splash-y,0px) + .15%),0) scale(1.024)}}
@keyframes splash-scan-beam{0%{transform:translateX(-55%) rotate(-7deg);opacity:0}18%{opacity:.25}50%{opacity:.95}82%{opacity:.18}100%{transform:translateX(55%) rotate(-7deg);opacity:0}}
@keyframes splash-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.68)}18%{opacity:.75}70%{opacity:.16;transform:translate(-50%,-50%) scale(1.22)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
@keyframes splash-light-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes splash-activation{0%{opacity:0;transform:scale(.88)}30%{opacity:.95;transform:scale(1.02)}68%{opacity:.34;transform:scale(1.10)}100%{opacity:0;transform:scale(1.18)}}
@keyframes splash-glow{0%,100%{opacity:.35;transform:scale(.98)}50%{opacity:.9;transform:scale(1.03)}}
@keyframes logo-shine{0%,22%{opacity:0}31%{opacity:.9}44%{opacity:0}100%{opacity:0}}
@keyframes lens-shine{0%,28%{opacity:0}38%{opacity:.8}49%{opacity:0}100%{opacity:0}}
@keyframes loading-sheen{from{left:-24%}to{left:112%}}
@keyframes grain-jitter{0%{transform:translate(0,0)}25%{transform:translate(-.4%,.3%)}50%{transform:translate(.3%,-.2%)}75%{transform:translate(.2%,.4%)}100%{transform:translate(0,0)}}
@keyframes splash-ready{0%{transform:scale(1.02)}58%{transform:scale(1.045)}100%{transform:scale(1.025)}}
@keyframes loading-pop{0%{transform:scale(1)}45%{transform:scale(1.025)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.world-splash-stage .world-splash-art,.splash-world-glow,.splash-parallax-light,.splash-logo-shine,.splash-lens-shine,.splash-grain,.world-loading-sheen{animation:none!important}.world-splash-stage .world-splash-art{transform:none}.world-loading-fill{transition:none}}
.world-nav{position:absolute;inset:0;z-index:5}
.hub-link{position:absolute;border:0;background:transparent;touch-action:manipulation}
/* Exact card bounds on BARAMEEL WORLD artwork. */
.hub-run{left:1.85%;top:47.95%;width:46.65%;height:13.95%}
.hub-duo{left:49.10%;top:47.95%;width:48.25%;height:13.95%}
.hub-menu{left:1.85%;top:62.55%;width:46.65%;height:15.65%}
.hub-post{left:49.10%;top:62.55%;width:48.25%;height:15.65%}
.hub-profile{left:2.80%;top:79.35%;width:94.25%;height:9.05%}
.social-ig{left:22.5%;top:88.35%;width:10.5%;height:7.6%}
.social-tt{left:37.8%;top:88.35%;width:10.5%;height:7.6%}
.social-fb{left:53.5%;top:88.35%;width:10.5%;height:7.6%}
.social-wa{left:69.2%;top:88.35%;width:10.5%;height:7.6%}


/* SCREEN 02 — BARAMEEL WORLD HUB
   Shared DNA: cream/ink/gold, crown, comic typography, arcade feedback.
   Section signatures remain distinct: RUN=orange/red, DUO=cyan, MENU=gold/orange,
   POST=magenta, MY BARAMEEL=deep teal/cyan. Artwork remains untouched. */
.world-hub-stage{--mx:0%;--my:0%;background:#061f27}
.world-hub-stage .world-art{transform:scale(1.008) translate3d(var(--mx),var(--my),0);animation:world-art-breathe 7s ease-in-out infinite alternate;will-change:transform}
.world-ambient-glow{position:absolute;inset:-12%;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 25%,rgba(240,200,48,.09),transparent 27%),radial-gradient(circle at 15% 72%,rgba(217,47,37,.06),transparent 24%),radial-gradient(circle at 85% 72%,rgba(24,183,208,.06),transparent 24%);mix-blend-mode:screen;animation:world-ambient 6s ease-in-out infinite}
.world-scanline{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.055;background:repeating-linear-gradient(180deg,rgba(255,255,255,.32) 0 1px,transparent 1px 5px);mix-blend-mode:soft-light;animation:world-scan 8s linear infinite}
.world-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");mix-blend-mode:soft-light;animation:world-grain .25s steps(2) infinite}
.world-live-pulse{position:absolute;z-index:12;left:7.1%;top:40.7%;width:2.8%;aspect-ratio:1;border-radius:50%;background:#45e48a;box-shadow:0 0 0 0 rgba(69,228,138,.55);animation:live-dot 1.9s ease-out infinite;pointer-events:none}
.world-card-fx{position:absolute;z-index:6;pointer-events:none;border-radius:4.5%;opacity:0;transform:scale(.985);transition:none;overflow:hidden}
.world-card-fx::before{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.82) 48%,transparent 58%);transform:translateX(-65%);opacity:0}
.fx-run,.fx-duo,.fx-menu,.fx-post,.fx-profile{box-shadow:none}
.fx-profile{border-radius:6%}
.fx-run.is-active,.fx-duo.is-active,.fx-menu.is-active,.fx-post.is-active,.fx-profile.is-active{animation:section-lock .42s cubic-bezier(.16,.86,.2,1) both}
.fx-run.is-active::before,.fx-duo.is-active::before,.fx-menu.is-active::before,.fx-post.is-active::before,.fx-profile.is-active::before{animation:section-shine .62s ease-out both}
.world-card-fx.is-active{z-index:25;opacity:1}
.fx-run.is-active{box-shadow:inset 0 0 0 4px rgba(255,179,38,.98),0 0 28px rgba(217,47,37,.55)}
.fx-duo.is-active{box-shadow:inset 0 0 0 4px rgba(24,183,208,.98),0 0 28px rgba(24,183,208,.55)}
.fx-menu.is-active{box-shadow:inset 0 0 0 4px rgba(240,200,48,.98),0 0 28px rgba(240,138,44,.50)}
.fx-post.is-active{box-shadow:inset 0 0 0 4px rgba(229,74,165,.98),0 0 28px rgba(229,74,165,.50)}
.fx-profile.is-active{box-shadow:inset 0 0 0 4px rgba(24,183,208,.98),0 0 28px rgba(24,183,208,.45)}
.world-nav{z-index:20}
.hub-link{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .12s ease,transform .12s ease}
.hub-link:active{filter:brightness(1.12);transform:scale(.985)}

@keyframes world-art-breathe{from{transform:scale(1.008) translate3d(var(--mx),var(--my),0)}to{transform:scale(1.014) translate3d(var(--mx),calc(var(--my) - .25%),0)}}
@keyframes world-ambient{0%,100%{opacity:.42;transform:scale(.99)}50%{opacity:.82;transform:scale(1.025)}}
@keyframes world-scan{from{background-position:0 0}to{background-position:0 100px}}
@keyframes world-grain{0%,100%{transform:translate(0,0)}50%{transform:translate(.2%,-.2%)}}
@keyframes live-dot{0%{box-shadow:0 0 0 0 rgba(69,228,138,.52)}70%{box-shadow:0 0 0 9px rgba(69,228,138,0)}100%{box-shadow:0 0 0 0 rgba(69,228,138,0)}}
@keyframes section-lock{0%{opacity:0;transform:scale(.985)}25%{opacity:1;transform:scale(1.012)}70%{opacity:1;transform:scale(.998)}100%{opacity:0;transform:scale(1)}}
@keyframes section-shine{0%{opacity:0;transform:translateX(-70%)}35%{opacity:.9}100%{opacity:0;transform:translateX(75%)}}
@media (prefers-reduced-motion:reduce){.world-hub-stage .world-art,.world-ambient-glow,.world-scanline,.world-grain,.world-live-pulse,.world-card-fx{animation:none!important}.world-hub-stage .world-art{transform:none}.hub-link{transition:none}}

/* SHARED BACK CONTROL FOR NON-ARTWORK SCREENS */
.back-link,.ui-back-button{position:absolute;z-index:90;left:3.1%;top:1.8%;width:18%;height:5.7%;border:0;background:transparent;touch-action:manipulation}
.back-link::before,.ui-back-button::before{content:'←  BACK';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--red);border:3px solid var(--yellow);border-radius:999px;color:#fff;font-family:'Righteous','Arial Black',Impact,sans-serif;font-size:clamp(10px,2.9vw,20px);line-height:1;text-shadow:1px 2px #5d160f;box-shadow:0 3px 0 #071a20,0 0 0 1px rgba(0,0,0,.5);white-space:nowrap}
.back-link:active,.ui-back-button:active{transform:scale(.98)}

/* PLACEHOLDER WORLD PAGES */
.screen-shell{position:relative;width:min(100vw,calc(100dvh*953/1651));height:min(100dvh,calc(100vw*1651/953));margin:auto;overflow:hidden;background:var(--teal);aspect-ratio:953/1651}
.asset-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.asset-card{position:absolute;border:2px solid rgba(240,200,48,.65);border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#123b50,#071c28);color:var(--cream);font-weight:900;letter-spacing:.04em;text-align:center;padding:18px;box-shadow:0 8px 0 rgba(0,0,0,.18)}
.asset-card small{display:block;margin-top:6px;font-weight:700;opacity:.75}
.asset-card.run{border-color:#f0c830}.asset-card.duo{border-color:#18b7d0}.asset-card.menu{border-color:#f08a2c}.asset-card.post{border-color:#e54aa5}
.duo-stage,.map-stage{position:relative;width:min(100vw,calc(100dvh*953/1651));height:min(100dvh,calc(100vw*1651/953));margin:auto;aspect-ratio:953/1651;background:var(--teal);overflow:hidden}
.duo-content{position:absolute;inset:0;padding:18% 8% 8%;text-align:center}
.duo-title{font-family:'Righteous','Arial Black',Impact,sans-serif;font-size:clamp(32px,10vw,70px);color:var(--yellow);text-shadow:4px 4px #071a20;margin:0}
.duo-sub{font-weight:900;letter-spacing:.08em;margin:4px 0 20px}
.qr-box{width:62%;aspect-ratio:1;margin:8% auto 5%;background:#fff;border:8px solid var(--yellow);border-radius:18px;display:grid;place-items:center;color:#071a20;font-size:12px;font-weight:900}
.duo-button{display:block;width:80%;margin:12px auto;height:56px;border:3px solid var(--yellow);border-radius:999px;background:var(--yellow);color:#071a20;font-weight:900;font-size:18px;touch-action:manipulation}
.duo-input{width:80%;height:50px;border-radius:999px;border:2px solid var(--yellow);background:#071a20;color:#fff;text-align:center;font-weight:900}
.placeholder-note{opacity:.72;font-size:12px;margin:16px auto;max-width:80%}

/* RUN START — artwork supplied 942×1669; keep exact native ratio */
.run-page{width:min(100vw,calc(100dvh*942/1669));height:min(100dvh,calc(100vw*1669/942));aspect-ratio:942/1669}
.run-page .base{object-fit:fill}
.run-page .nickname-input{position:absolute;left:10.8%;top:75.65%;width:78.4%;height:8.0%;z-index:20}
.run-page .start-hotspot{left:10.5%;top:84.65%;width:79.0%;height:8.95%;z-index:21}
/* RUN START — exact artwork field + button */
.run-page .nickname-input{position:absolute;left:10.8%;top:75.65%;width:78.4%;height:8.0%;z-index:20;border:0;outline:0;background:transparent;border-radius:999px;color:var(--teal);text-align:center;font-family:'Righteous','Arial Black',Impact,sans-serif;font-size:clamp(13px,4vw,25px);font-weight:400;letter-spacing:.025em;padding:0 5%;text-transform:uppercase}
.run-page .nickname-input::placeholder{color:#0e2a3d;opacity:.72}
.run-page .nickname-input:focus{filter:drop-shadow(0 0 5px rgba(240,200,48,.75))}
.run-page .start-hotspot{left:10.5%;top:84.65%;width:79.0%;height:8.95%;z-index:21}
.run-page .start-hotspot:active{transform:scale(.988)}

/* RUNNER SELECT / CONFIRM */
.runner-card-hotspot{position:absolute;border:0;background:transparent;touch-action:manipulation}

/* PROGRESS */
.scan-stage,.rewards-stage{position:relative;width:min(100vw,calc(100dvh*720/1280));height:min(100dvh,calc(100vw*1280/720));margin:auto;aspect-ratio:720/1280;background:var(--teal);overflow:hidden}
.scan-art,.rewards-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.progress-data{position:absolute;inset:0;z-index:20;pointer-events:none}
.progress-value{position:absolute;display:flex;align-items:center;justify-content:center;font-family:'Righteous','Arial Black',Impact,sans-serif;font-weight:400;line-height:1;white-space:nowrap;color:#071a20}
/* Text sits inside the empty bars, not on top of their labels. */
.points-value{left:67.3%;top:47.5%;width:22.8%;height:3.2%;font-size:clamp(14px,4.4vw,31px)}
.rank-value{left:67.3%;top:53.8%;width:22.8%;height:3.2%;font-size:clamp(13px,4vw,29px);color:#f5e9dc}
.weekly-value{left:67.3%;top:60.0%;width:22.8%;height:3.2%;font-size:clamp(13px,4vw,29px);color:#f5e9dc}
.checkpoint-value{left:67.0%;top:68.7%;width:20.0%;height:3.2%;font-size:clamp(12px,3.7vw,27px);color:#f5e9dc}
.checkpoint-dots{position:absolute;left:64.3%;top:65.6%;width:25.3%;height:3.2%;display:flex;justify-content:space-between}
.checkpoint-dot{width:12.5%;aspect-ratio:1;border-radius:50%;border:2px solid #f5e9dc;background:transparent}
.checkpoint-dot.on{background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 8px rgba(240,200,48,.65)}
.rewards-back{position:absolute;left:3.7%;top:1.2%;width:11.5%;height:6.4%;z-index:25;background:transparent;border:0}
.rewards-scan-hotspot{position:absolute;left:50.0%;top:72.0%;width:49.0%;height:9.0%;z-index:25;background:transparent;border:0}

/* SCANNER — exact artwork bounds */
.scan-back-hotspot{position:absolute;left:3.7%;top:1.1%;width:11.6%;height:6.4%;z-index:40}
.scan-open-hotspot{position:absolute;left:18.0%;top:74.1%;width:75.8%;height:7.0%;z-index:50;border:0;background:transparent}
.scan-collections-hotspot{position:absolute;left:18.0%;top:81.7%;width:75.8%;height:6.8%;z-index:50;border:0;background:transparent}
.camera-window{position:absolute;left:48.5%;top:53.2%;width:42.0%;height:20.0%;z-index:45;overflow:hidden;display:none;background:#071c28;border:5px solid #f4f0e8;border-radius:8px;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 8px 18px rgba(0,0,0,.28)}
.camera-window.active{display:block}
.camera-window video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scanner-corners{position:absolute;inset:0;pointer-events:none;z-index:4}
.scanner-corners i{position:absolute;width:12%;height:12%;border-color:#f4f0e8;border-style:solid}
.scanner-corners i:nth-child(1){left:1%;top:1%;border-width:4px 0 0 4px}.scanner-corners i:nth-child(2){right:1%;top:1%;border-width:4px 4px 0 0}.scanner-corners i:nth-child(3){left:1%;bottom:1%;border-width:0 0 4px 4px}.scanner-corners i:nth-child(4){right:1%;bottom:1%;border-width:0 4px 4px 0}
.scanner-line{position:absolute;left:8%;right:8%;top:50%;height:3px;background:var(--yellow);box-shadow:0 0 10px rgba(240,200,48,.85);transform:translateY(-50%);animation:scanline 1.8s ease-in-out infinite alternate;z-index:5;pointer-events:none}
@keyframes scanline{from{top:18%}to{top:82%}}
.scan-message{position:absolute;left:34%;top:89.0%;width:61%;min-height:5.2%;z-index:80;display:flex;align-items:center;justify-content:center;padding:1.0% 3%;text-align:center;font-family:'Righteous','Arial Black',Impact,sans-serif;font-size:clamp(12px,2.9vw,18px);line-height:1.1;color:var(--cream);background:rgba(7,26,32,.94);border:3px solid var(--yellow);border-radius:14px;box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 0 1px rgba(217,47,37,.9);opacity:0;transform:translateY(7px) scale(.98);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.scan-message.show{opacity:1;transform:none}
.scan-message.error{border-color:#f05a42;box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 0 1px #7d1e17}
.scan-message.success{border-color:var(--yellow);box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 18px rgba(240,200,48,.35)}

/* COLLECTION — V21.4 exact geometry for supplied 954×1649 artwork */
.collection-stage{aspect-ratio:989/1591;height:min(100dvh,calc(100vw*1591/989));width:min(100vw,calc(100dvh*989/1591));background:#061f27}
.collection-back{position:absolute;z-index:70;left:2.5%;top:1.05%;width:11.4%;height:6.6%;border:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation}
/* The artwork already contains the arrow and circle. The transparent hotspot follows it exactly. */
.collection-select{position:absolute;z-index:56;left:45.3%;top:32.0%;width:48.8%;height:4.1%;border:0;background:transparent;color:transparent;font-size:0;text-align:center;text-align-last:center;text-transform:uppercase;outline:none;appearance:none;padding:0;line-height:1;cursor:pointer}
 .collection-name{position:absolute;z-index:55;left:54.0%;top:33.50%;width:30.54%;height:3.27%;display:flex;align-items:center;justify-content:center;color:#f7e8bd;font-family:'Bebas Neue','Roboto Condensed','Arial Narrow',Arial,sans-serif;font-size:clamp(11px,2.62vw,23px);font-weight:400;letter-spacing:.045em;line-height:1;text-transform:uppercase;text-align:center;text-shadow:1.5px 1.5px 0 #071a20,0 0 3px rgba(247,189,39,.30);pointer-events:none;white-space:nowrap;transform:translateY(-1%)}
.collection-select option{color:#071a20;background:var(--cream)}
.hero-grid{position:absolute;z-index:20;left:46.25%;top:37.20%;width:48.65%;height:20.90%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);column-gap:1.55%;row-gap:1.45%;padding:0;overflow:hidden;pointer-events:none}
.hero-piece{min-width:0;min-height:0;background-repeat:no-repeat;background-color:transparent;background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(239,226,190,.34)}
.hero-grid.completed{display:block;overflow:hidden;box-shadow:none;animation:completedGlow 1.7s ease both;background-repeat:no-repeat;background-position:center;background-size:100% 100%}
@keyframes completedGlow{0%{filter:brightness(1) saturate(1)}28%{filter:brightness(1.22) saturate(1.16)}65%{filter:brightness(1.08) saturate(1.08)}100%{filter:brightness(1) saturate(1)}}
/* Live score: transparent number only. The artwork owns the star/POINTS graphics below it. */
.points-badge{position:absolute;z-index:66;left:56.8%;top:58.55%;width:29.0%;height:4.55%;display:flex;align-items:center;justify-content:center;pointer-events:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.55));}
.points-number{position:relative;z-index:2;color:#ffd21a;font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif;font-size:clamp(18px,4.7vw,44px);font-weight:900;line-height:.92;letter-spacing:-.025em;text-align:center;white-space:nowrap;-webkit-text-stroke:1.5px #d92f25;paint-order:stroke fill;text-shadow:0 3px 0 #071a20,0 0 7px rgba(255,210,26,.34);transform:rotate(-4deg) skewX(-4deg);transform-origin:center}
.points-badge.revealing{animation:pointsPop .46s cubic-bezier(.16,.9,.2,1) both}
@keyframes pointsPop{0%{opacity:.15;transform:scale(.68) rotate(-4deg)}65%{opacity:1;transform:scale(1.08) rotate(1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.points-badge.common{filter:drop-shadow(0 4px 0 rgba(0,0,0,.42)) drop-shadow(0 0 5px rgba(247,189,39,.18))}.points-badge.uncommon{filter:drop-shadow(0 4px 0 rgba(0,0,0,.42)) drop-shadow(0 0 7px rgba(247,189,39,.28))}.points-badge.rare{filter:drop-shadow(0 4px 0 rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(247,189,39,.38))}.points-badge.epic{filter:drop-shadow(0 4px 0 rgba(0,0,0,.42)) drop-shadow(0 0 13px rgba(247,189,39,.50))}.points-badge.legendary{filter:drop-shadow(0 4px 0 rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(247,189,39,.66))}.points-badge.mythic{filter:drop-shadow(0 4px 0 rgba(0,0,0,.42)) drop-shadow(0 0 24px rgba(247,189,39,.84))}
 .reward-flash{position:absolute;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;overflow:visible;background:none;isolation:isolate}
.reward-flash-image{position:relative;z-index:3;width:min(82%,760px);max-height:34%;height:auto;object-fit:contain;opacity:0;transform:translateY(-1%) scale(.62) rotate(-3deg);filter:drop-shadow(0 8px 0 rgba(0,0,0,.52)) drop-shadow(0 0 0 rgba(255,208,48,0));will-change:transform,opacity,filter}
.reward-flash-glow{position:absolute;z-index:1;width:min(76%,720px);height:30%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,221,72,.36) 0%,rgba(255,145,24,.16) 38%,rgba(255,255,255,0) 72%);filter:blur(24px);opacity:0;transform:scale(.62);pointer-events:none}
.reward-flash-sheen{position:absolute;z-index:4;left:-40%;top:25%;width:180%;height:50%;opacity:0;background:linear-gradient(108deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.96) 50%,rgba(255,255,255,.18) 54%,rgba(255,255,255,0) 60%);transform:rotate(-8deg) translateX(-55%);mix-blend-mode:screen;filter:blur(.35px);-webkit-mask-image:var(--flash-art);mask-image:var(--flash-art);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;mask-position:center;mask-size:contain;pointer-events:none}
.reward-flash.on{animation:rewardFlashFade var(--reward-duration,7s) ease-out both}
.reward-flash.on .reward-flash-image{animation:rewardCardReveal var(--reward-duration,7s) cubic-bezier(.16,.82,.18,1) both}
.reward-flash.on .reward-flash-glow{animation:rewardGlow var(--reward-duration,7s) ease-out both}
.reward-flash.on .reward-flash-sheen{animation:rewardMetalSheen 2.05s cubic-bezier(.2,.65,.25,1) .18s both}
@keyframes rewardFlashFade{0%{opacity:0}9%{opacity:.82}28%{opacity:.82}72%{opacity:.70}90%{opacity:.38}100%{opacity:0}}
@keyframes rewardCardReveal{0%{opacity:0;transform:translateY(5%) scale(.62) rotate(-4deg);filter:drop-shadow(0 4px 0 rgba(0,0,0,.22)) drop-shadow(0 0 0 rgba(255,208,48,0)) brightness(.92)}8%{opacity:1;transform:translateY(-1%) scale(1.13) rotate(2deg);filter:drop-shadow(0 10px 0 rgba(0,0,0,.55)) drop-shadow(0 0 42px rgba(255,208,48,.98)) brightness(1.18)}17%{opacity:1;transform:translateY(-1%) scale(.98) rotate(-.6deg);filter:drop-shadow(0 9px 0 rgba(0,0,0,.50)) drop-shadow(0 0 28px rgba(255,208,48,.82)) brightness(1.08)}25%{opacity:1;transform:translateY(-1%) scale(1) rotate(0);filter:drop-shadow(0 8px 0 rgba(0,0,0,.48)) drop-shadow(0 0 22px rgba(255,208,48,.68)) brightness(1.02)}88%{opacity:1;transform:translateY(-1%) scale(1) rotate(0);filter:drop-shadow(0 8px 0 rgba(0,0,0,.48)) drop-shadow(0 0 20px rgba(255,208,48,.58)) brightness(1)}100%{opacity:0;transform:translateY(-1%) scale(.98) rotate(0);filter:drop-shadow(0 8px 0 rgba(0,0,0,.28)) drop-shadow(0 0 7px rgba(255,208,48,.18)) brightness(1)}}
@keyframes rewardGlow{0%{opacity:0;transform:scale(.62)}8%{opacity:.95;transform:scale(1.08)}22%{opacity:.30;transform:scale(.98)}72%{opacity:.26;transform:scale(1)}90%{opacity:.12;transform:scale(1.03)}100%{opacity:0;transform:scale(1.10)}}
@keyframes rewardMetalSheen{0%{opacity:0;transform:rotate(-8deg) translateX(-62%)}12%{opacity:0;transform:rotate(-8deg) translateX(-62%)}20%{opacity:.95}54%{opacity:.78;transform:rotate(-8deg) translateX(56%)}64%{opacity:0;transform:rotate(-8deg) translateX(78%)}100%{opacity:0;transform:rotate(-8deg) translateX(82%)}}
/* Legacy CSS jackpot shape is kept hidden; the supplied JACKPOT artwork is now the single visual flash. */
.jackpot-flash{display:none!important}
.jackpot-word{display:none!important}

.collection-thumbs{position:absolute;inset:0;z-index:35;pointer-events:none}
.collection-thumb{position:absolute;border:0;background:transparent;padding:0;overflow:visible;pointer-events:auto;cursor:pointer;min-width:0;min-height:0}
.thumb-grid{position:absolute;left:4.50%;top:5.50%;width:91.00%;height:88.00%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);column-gap:3px;row-gap:2px;padding:0;overflow:hidden;z-index:2}
.thumb-piece{min-width:0;min-height:0;background-repeat:no-repeat;background-color:transparent;background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(222,214,177,.30)}
 .collection-thumb::before{content:attr(data-num);position:absolute;z-index:5;left:2.2%;top:-3.8%;width:24.0%;aspect-ratio:1/1;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f6c51b;color:#071a20;font-family:'Bebas Neue','Roboto Condensed','Arial Narrow',Arial,sans-serif;font-size:clamp(9px,2.02vw,18px);font-weight:400;line-height:1;letter-spacing:.015em;border:2px solid #071a20;box-shadow:0 2px 0 rgba(0,0,0,.55),0 0 0 1px #f6c51b,0 0 8px rgba(246,197,27,.28);text-shadow:none;pointer-events:none}
/* No /9 or collected-count text: the supplied artwork intentionally owns the card footer. */
.collection-thumb:active{transform:scale(.985)}
/* Exact transparent hotspots for the new artwork. */
#myRewards{left:3.15%;top:60.75%;width:37.65%;height:5.55%;z-index:90}
#scanMore{left:3.15%;top:66.70%;width:37.65%;height:5.55%;z-index:90}
.complete-flash{position:absolute;inset:0;z-index:80;pointer-events:none;opacity:0;background:radial-gradient(ellipse 28% 19% at 71% 43%,rgba(255,244,188,.42) 0%,rgba(247,189,39,.16) 38%,rgba(255,245,214,0) 78%);mix-blend-mode:screen}
.complete-flash.on{animation:completePulse 1.45s ease-in-out both}
@keyframes completePulse{0%,100%{opacity:0}18%{opacity:.75}38%{opacity:.10}58%{opacity:.42}78%{opacity:.05}}
.hero-piece.is-missing,.thumb-piece.is-missing{opacity:.18;filter:saturate(.7) brightness(1.18)}
.hero-piece.is-collected,.thumb-piece.is-collected{opacity:1}

/* Generic controls */
.duo-button:active{transform:scale(.985)}

.run-page .scan-message{left:24%;top:69.0%;width:52%;min-height:4.8%;}
.success-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:rgba(240,200,48,.16)}
.success-flash.on{animation:flash .34s ease-out both}

/* V21.11 — Screen 02 card FX are locked to the actual hotspot rectangles.
   JS copies each link's live geometry into its FX layer, eliminating coordinate drift. */
.world-hub-stage .hub-link[data-section]{overflow:visible}
.world-hub-stage .hub-link[data-section]::before{
  content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:inherit;pointer-events:none;opacity:0;
}
.world-hub-stage .hub-link[data-section]::after{
  content:"";position:absolute;inset:-5px;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.92) 49%,transparent 60%);
  transform:translateX(-110%);mix-blend-mode:screen;
}
.world-hub-stage[data-active="run"] .hub-run::before{border-color:#ffb326;box-shadow:0 0 24px rgba(217,47,37,.65);opacity:1;animation:card-lock .46s cubic-bezier(.16,.86,.2,1) both}
.world-hub-stage[data-active="duo"] .hub-duo::before{border-color:#18b7d0;box-shadow:0 0 24px rgba(24,183,208,.65);opacity:1;animation:card-lock .46s cubic-bezier(.16,.86,.2,1) both}
.world-hub-stage[data-active="menu"] .hub-menu::before{border-color:#f0c830;box-shadow:0 0 24px rgba(240,138,44,.60);opacity:1;animation:card-lock .46s cubic-bezier(.16,.86,.2,1) both}
.world-hub-stage[data-active="post"] .hub-post::before{border-color:#e54aa5;box-shadow:0 0 24px rgba(229,74,165,.60);opacity:1;animation:card-lock .46s cubic-bezier(.16,.86,.2,1) both}
.world-hub-stage[data-active="profile"] .hub-profile::before{border-color:#18b7d0;box-shadow:0 0 24px rgba(24,183,208,.55);opacity:1;animation:card-lock .46s cubic-bezier(.16,.86,.2,1) both}
.world-hub-stage[data-active="run"] .hub-run::after,
.world-hub-stage[data-active="duo"] .hub-duo::after,
.world-hub-stage[data-active="menu"] .hub-menu::after,
.world-hub-stage[data-active="post"] .hub-post::after,
.world-hub-stage[data-active="profile"] .hub-profile::after{opacity:1;animation:card-shine .58s ease-out both}
.world-hub-stage .hub-link[data-section]:active{transform:scale(.975);filter:brightness(1.18)}
@keyframes card-lock{0%{transform:scale(.97);opacity:0}22%{opacity:1}55%{transform:scale(1.025)}100%{transform:scale(1);opacity:1}}
@keyframes card-shine{0%{transform:translateX(-110%);opacity:0}18%{opacity:1}65%{transform:translateX(110%);opacity:1}100%{transform:translateX(120%);opacity:0}}

/* V21.11 FINAL WORLD FIX — old free-position FX are disabled.
   The visible lock-on effect lives directly on the exact hotspot element,
   so its border/shine can never drift away from the clickable card. */
.world-hub-stage .world-card-fx{display:none!important}
.world-hub-stage .hub-link[data-section]{z-index:30}
.world-hub-stage .hub-link[data-section]::before{
  transition:opacity .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.world-hub-stage .hub-link[data-section]:hover::before{
  opacity:.55;
}
.world-hub-stage .hub-link[data-section].is-active::before{
  animation:card-lock .46s cubic-bezier(.16,.86,.2,1) both;
}
.world-hub-stage .hub-link[data-section].is-active::after{
  animation:card-shine .58s ease-out both;
}
.world-hub-stage .hub-link[data-section].is-active{
  animation:hub-card-impact .34s cubic-bezier(.16,.86,.2,1) both;
}
@keyframes hub-card-impact{
  0%{filter:brightness(1);transform:scale(1)}
  32%{filter:brightness(1.28);transform:scale(.982)}
  68%{filter:brightness(1.10);transform:scale(1.012)}
  100%{filter:brightness(1);transform:scale(1)}
}
/* Stronger World ambient movement without changing its coordinate system. */
.world-hub-stage .world-ambient-glow{animation:world-ambient-strong 4.8s ease-in-out infinite}
@keyframes world-ambient-strong{
  0%,100%{opacity:.32;transform:translate3d(-1%,0,0) scale(.98)}
  50%{opacity:.9;transform:translate3d(1%,-.5%,0) scale(1.035)}
}

/* V23.1 accessibility without changing artwork geometry. */
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f4c52f;outline-offset:3px}

/* V23.2 MASTER-FLOW HARDENING — geometry, haptics/fx alignment and world-card repeat lock. */
.flow-data.dynamic-field{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan-stage,.rewards-stage{width:min(100vw,calc(100dvh*948/1659));height:min(100dvh,calc(100vw*1659/948));aspect-ratio:948/1659}
.route-map-live{position:absolute;overflow:hidden;border-radius:3.2%;isolation:isolate;box-shadow:inset 0 0 0 3px rgba(246,231,206,.82),inset 0 0 0 6px rgba(244,197,47,.26),0 7px 18px rgba(0,0,0,.38)}
.route-map-live::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:500;background:radial-gradient(ellipse at center,transparent 53%,rgba(0,0,0,.26) 100%);mix-blend-mode:multiply}
.route-map-live .leaflet-container{background:#071b2b;filter:saturate(.72) contrast(.92) brightness(.88) sepia(.10)}
.route-map-live .leaflet-tile-pane{opacity:.92}
.route-map-live .leaflet-control-attribution{background:rgba(7,27,43,.72)!important;color:#f6e7ce!important;font-size:7px!important;line-height:1.2!important}
.route-map-live .leaflet-control-attribution a{color:#f6e7ce!important}
.route-map-live .leaflet-tooltip{font:900 10px/1 'Roboto Condensed',Arial,sans-serif;color:#071b2b;background:#f6e7ce;border:2px solid #f4c52f;box-shadow:0 2px 0 #071b2b}
.world-hub-stage .hub-link[data-section]{border-radius:5.2%!important}
.world-hub-stage .hub-profile{border-radius:6.2%!important}
.world-hub-stage .hub-link[data-section].is-active::before{inset:-.15%!important;border-width:3px!important}
.world-hub-stage .hub-link[data-section].is-active::after{inset:-1.2%!important;animation:card-shine .58s ease-out 0s 2 both!important}
.world-hub-stage .hub-link[data-section].is-active::before{animation:card-lock .46s cubic-bezier(.16,.86,.2,1) both,card-glow-loop 1.05s ease-in-out .18s 2 both!important}
@keyframes card-glow-loop{0%,100%{opacity:.98;filter:brightness(1)}50%{opacity:.66;filter:brightness(1.12)}}
@media (prefers-reduced-motion:reduce){.world-hub-stage .hub-link[data-section].is-active::before{
  animation:card-lock .46s cubic-bezier(.16,.86,.2,1) both,card-glow-loop 1.05s ease-in-out .18s 2!important;
  border-color:#f4c52f!important;
  box-shadow:0 0 0 2px #071b2b,0 0 12px rgba(244,197,47,.88),0 0 24px rgba(239,45,36,.46);
}
.world-hub-stage .hub-link[data-section].is-active::after{
  animation:card-shine .58s ease-out 0s 1 both!important;
  opacity:.95!important;
}
.world-hub-stage .hub-link[data-section]::before{
  /* The artwork title is the visual target; the hotspot remains full-card for reliable touch. */
  inset:3% 6% 45% 6%!important;
  border-radius:10%!important;
}
.world-hub-stage .hub-collection::before{clip-path:polygon(7% 10%,92% 5%,96% 42%,86% 73%,34% 78%,8% 58%)}
.world-hub-stage .hub-run::before{clip-path:polygon(7% 10%,94% 4%,97% 42%,84% 75%,34% 78%,7% 58%)}
.world-hub-stage .hub-duo::before{clip-path:polygon(7% 10%,94% 4%,97% 42%,84% 75%,34% 78%,7% 58%)}
.world-hub-stage .hub-menu::before{clip-path:polygon(7% 10%,94% 4%,97% 42%,84% 75%,34% 78%,7% 58%)}
.world-hub-stage .hub-post::before{clip-path:polygon(7% 10%,94% 4%,97% 42%,84% 75%,34% 78%,7% 58%)}
.world-hub-stage .hub-profile::before{clip-path:none;inset:2% 3%!important}}

.haptic-pulse{animation:barameel-haptic-pulse .14s ease-out both}
@keyframes barameel-haptic-pulse{0%{filter:brightness(1)}45%{filter:brightness(1.07)}100%{filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.haptic-pulse{animation:none!important}}