#device-host .fr-hub-scroll:has(.pl3){padding:0!important;overflow:hidden!important;display:flex;flex-direction:column}
#device-host .pl3{position:relative;flex:1;min-height:0;isolation:isolate;overflow:hidden;font-family:var(--pd-font);color:var(--pd-ink);background:radial-gradient(ellipse at 50% 35%,#303238 0,#14161b 38%,#050607 78%);display:flex;flex-direction:column}
#device-host .pl3::before{content:'';position:absolute;inset:0;background:radial-gradient(#ffffff19 1px,transparent 1.5px) 50% 0/6px 6px;mask-image:linear-gradient(#000,transparent 38%);pointer-events:none}
#device-host .pl3-head{position:relative;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 20px;background:linear-gradient(#0b0c0fe6,#0b0c0f00);pointer-events:none}
#device-host .pl3-head>div{flex:1;min-width:0}
#device-host .pl3-head>div>strong{display:block;font:700 20px/24px var(--pd-font);margin-bottom:8px}
#device-host .pl3-head>div>span{display:flex;justify-content:space-between;gap:8px;font:400 12px/16px var(--pd-font);color:#a9adb7}
#device-host .pl3-head>div b{font-weight:400;color:#f0f2f5}
#device-host .pl3-progress{display:block;height:4px;border-radius:999px;background:#ffffff17;margin-top:8px;overflow:hidden}
#device-host .pl3-progress i{display:block;height:100%;background:#d71921}
#device-host .pl3-space{position:absolute;inset:0 0 198px;touch-action:none;cursor:grab;outline:none}
#device-host .pl3-space:active{cursor:grabbing}
#device-host .pl3-space:focus-visible{box-shadow:inset 0 0 0 2px #ffffff88}
#device-host .pl3-loading{position:absolute;top:45%;width:100%;text-align:center;color:#a9adb7;font:400 14px/20px var(--pd-font)}
#device-host .pl3-home{position:absolute;bottom:225px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 12px;border:1px solid #ffffff24;border-radius:999px;background:#0d0f12e8;color:#f0f2f5;font:700 12px/16px var(--pd-font);cursor:pointer}
#device-host .pl3-home i{width:6px;height:6px;border-radius:50%;background:#d71921;box-shadow:0 0 12px #d71921}
#device-host .pl3-controls{margin-top:auto;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:12px;text-align:center;background:linear-gradient(transparent,#050607)}
#device-host .pl3-controls>div{display:flex;flex-direction:column;gap:4px}
#device-host .pl3-controls span{font:400 12px/16px var(--pd-font);color:#a9adb7;letter-spacing:.08em}
#device-host .pl3-controls strong{font:700 20px/24px var(--pd-font)}
#device-host .pl3-arrow{width:44px;height:44px;border:1px solid #ffffff24;border-radius:12px;background:#ffffff05;color:#f0f2f5;font:400 28px/28px var(--pd-font);cursor:pointer}
#device-host .pl3-arrow:disabled{opacity:.3;cursor:default}
#device-host .pl3-prize{z-index:3;display:flex;align-items:center;justify-content:center;gap:12px;min-height:68px;margin:8px 20px 0;border-top:1px solid #ffffff17;background:#050607}
#device-host .pl3-prize>img,#device-host .pl3-prize>.pdv-ico{height:36px;width:36px;object-fit:contain}
#device-host .pl3-prize>span{display:flex;flex-direction:column;gap:4px}
#device-host .pl3-prize strong{font:700 14px/20px var(--pd-font)}
#device-host .pl3-prize small{font:400 12px/16px var(--pd-font);color:#a9adb7}
#device-host .pl3-foot{z-index:3;display:flex;flex-direction:column;gap:12px;padding:0 16px 20px;background:#050607}
#device-host .pl3-foot input{width:100%;height:20px;margin:0;accent-color:#d71921;cursor:pointer}
#device-host .pl3-foot .pd-btn{min-height:48px;height:48px}
@media(max-height:760px){#device-host .pl3-head{padding:8px 16px}#device-host .pl3-prize{min-height:56px}#device-host .pl3-foot{padding-bottom:12px;gap:8px}#device-host .pl3-space{bottom:180px}#device-host .pl3-home{bottom:208px}}

#device-host .pl3[data-current=true] .pl3-home{left:var(--you-x,50%);top:var(--you-y,60%);bottom:auto}
/* Readable rewards are anchored to the individual 3D levels, including the focused one. */
#device-host .pl3{background:radial-gradient(ellipse at 15% 40%,#30323880,transparent 58%),radial-gradient(ellipse at 100% 75%,#d7192112,transparent 60%),linear-gradient(#14161b,#050607 84%)}
#device-host .pl3-map-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#device-host .pl3-map-label{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:5px;padding:9px 12px;border:1px solid #ffffff18;border-radius:12px;background:linear-gradient(130deg,#181b21f5,#090b0ff2);box-shadow:inset 0 1px 0 #ffffff0d,0 6px 18px #0003;white-space:nowrap;will-change:transform}
#device-host .pl3-map-label[hidden]{display:none!important}
#device-host .pl3-map-label>small{font:400 12px/16px var(--pd-font);color:#a9adb7}
#device-host .pl3-map-prize{display:flex;align-items:center;gap:8px}
#device-host .pl3-map-prize>.pdv-ico{width:20px;height:20px;flex:none}
#device-host .pl3-map-prize>b{font:700 16px/20px var(--pd-font);color:#f0f2f5}
#device-host .pl3-map-prize>i{font:700 12px/16px var(--pd-font);font-style:normal;color:#2fbf71}
#device-host .pl3-map-label[data-earned=true]::before{content:'';position:absolute;top:50%;width:var(--join,12px);height:1px;background:#ffffff30}
#device-host .pl3-map-label[data-side=right]::before{right:100%}
#device-host .pl3-map-label[data-side=left]::before{left:100%}
#device-host .pl3-map-label[data-focused=true]{border-color:#ffffff36;background:linear-gradient(130deg,#202329,#0d0f12);box-shadow:inset 0 1px 0 #ffffff17,0 8px 24px #0005}
#device-host .pl3-map-label[data-earned=false]{padding:3px 8px;border:0;border-radius:999px;background:#080a0de6;box-shadow:none}
#device-host .pl3-map-label[data-earned=false]>small{color:#d4dae1}
/* Give the spatial reward room; the gate alone needs an additional benefits panel. */
#device-host .pl3-prize:not([data-gate]){display:none}
#device-host .pl3:not(:has(.pl3-prize[data-gate])) .pl3-space{bottom:132px}
#device-host .pl3:not(:has(.pl3-prize[data-gate])) .pl3-home{bottom:158px}
#device-host .pl3[data-current=true] .pl3-home{bottom:auto!important}
#device-host .pl3-controls{padding-bottom:12px}
#device-host .pl3-foot input{appearance:none;-webkit-appearance:none;background:transparent;height:28px;outline-offset:4px}
#device-host .pl3-foot input::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,#d71921 var(--range-fill),#ffffff20 var(--range-fill))}
#device-host .pl3-foot input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:14px;width:14px;margin-top:-5px;border:3px solid #f0f2f5;border-radius:50%;background:#d71921;box-shadow:0 2px 8px #0009}
#device-host .pl3-foot input::-moz-range-track{height:4px;border-radius:999px;background:#ffffff20}
#device-host .pl3-foot input::-moz-range-progress{height:4px;border-radius:999px;background:#d71921}
#device-host .pl3-foot input::-moz-range-thumb{height:10px;width:10px;border:2px solid #f0f2f5;border-radius:50%;background:#d71921}
#device-host .pl3-space>canvas{mask-image:linear-gradient(transparent 0,transparent 64px,#000 116px,#000 88%,transparent 100%)}
#device-host .pl3-map-label[data-side=right]::before{transform-origin:right center;transform:rotate(var(--join-angle,0rad))}
#device-host .pl3-map-label[data-side=left]::before{transform-origin:left center;transform:rotate(var(--join-angle,0rad))}
/* Keep the return action above the focused level at every viewport height. */
#device-host .pl3[data-current=false] .pl3-home{position:relative;left:auto;bottom:auto!important;transform:none;align-self:center;margin-top:auto;margin-bottom:12px;flex:none}
#device-host .pl3[data-current=false] .pl3-controls{margin-top:0}

/* Temperature curtains span the road; quiet edges keep rewards and controls legible. */
#device-host .pl3{background:#050607}
#device-host .pl3::before{display:none}
#device-host .pl3-aurora{position:absolute;inset:-80px -40px 100px;pointer-events:none;overflow:hidden;z-index:0;opacity:1}
#device-host .pl3-aurora .pd-motion-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;filter:brightness(1.55)}
#device-host .pl3-aurora::after{content:'';position:absolute;inset:0;background:linear-gradient(#050607b3,transparent 20%,#05060718 55%,#050607c9 80%,#050607 94%)}
#device-host .pl3-space{z-index:1}
#device-host .pl3-head{background:linear-gradient(#08090be6,#08090b70 75%,transparent)}
/* Ten complete road compositions. All inherit the product's font, controls and assets. */
#device-host .pl3-eyebrow,#device-host .pl3-next,#device-host .pl3-chapters{display:none}
#device-host .pl3:not([data-design="0"]) .pl3-eyebrow{display:block;font:700 10px/14px var(--pd-font);letter-spacing:.14em;color:#959ca6;margin-bottom:4px}
#device-host .pl3:not([data-design="0"]) .pl3-next{display:block;color:#9ba2ac;font:400 11px/16px var(--pd-font);margin-top:6px}
#device-host .pl3:not([data-design="0"]) .pl3-head>div>strong{font-size:18px;margin-bottom:4px}
#device-host .pl3:not([data-design="0"]) .pl3-map-label>small{font-size:11px}
#device-host .pl3:not([data-design="0"]) .pl3-map-prize>b{font-size:14px}
#device-host .pl3-chapters{position:relative;z-index:3;gap:6px;margin:0 16px}
#device-host .pl3-chapters button{flex:1;min-width:0;padding:7px 3px;border:1px solid #ffffff15;border-radius:10px;background:#0d0f12d9;color:#bbc1ca;font-family:var(--pd-font);cursor:pointer}
#device-host .pl3-chapters small{display:block;font-size:8px;letter-spacing:.06em}
#device-host .pl3-chapters b{font-size:17px;line-height:24px}
#device-host .pl3-chapters i{font-size:10px;color:#858b93;margin-left:5px;font-style:normal}
#device-host .pl3-chapters [data-active=true]{border-color:#e32230;background:#411218;color:white}
/* 01 — Compact dashboard / open, long route */
#device-host .pl3[data-design="1"] .pl3-head{margin:8px 16px 0;padding:12px;border:1px solid #ffffff1c;border-radius:16px;background:#101216e8}
#device-host .pl3[data-design="1"] .pl3-next{display:none}
#device-host .pl3[data-design="1"] .pl3-controls{margin-left:16px;margin-right:16px;padding:12px;border:1px solid #ffffff20;border-radius:16px;background:#101216ed;margin-bottom:10px}
#device-host .pl3[data-design="1"] .pl3-controls strong{font-size:16px}
#device-host .pl3[data-design="1"] .pl3-aurora{inset:-140px -120px 80px;transform:rotate(-12deg)}
/* 02 — Split scoreboard / wider elevated route */
#device-host .pl3[data-design="2"] .pl3-head{align-items:center;padding:16px 20px;background:linear-gradient(110deg,#191b20e8,#08090b80);border-bottom:1px solid #ffffff16}
#device-host .pl3[data-design="2"] .pl3-head>div{border-left:1px solid #ffffff24;padding-left:18px}
#device-host .pl3[data-design="2"] .pl3-head>div>span{display:block}
#device-host .pl3[data-design="2"] .pl3-head b{float:right}
#device-host .pl3[data-design="2"] .pl3-space{top:22px}
#device-host .pl3[data-design="2"] .pl3-map-label{border-radius:6px;border-left:3px solid #cd926e}
#device-host .pl3[data-design="2"] .pl3-controls{padding:0 16px 14px}
#device-host .pl3[data-design="2"] .pl3-arrow{border-radius:50%;background:#17191d}
#device-host .pl3[data-design="2"] .pl3-aurora{inset:-120px -180px 90px;transform:scaleX(-1)}
/* 03 — Centered league crest / narrow ascending ribbon */
#device-host .pl3[data-design="3"] .pl3-head{justify-content:center;gap:10px;text-align:center;padding:6px 40px 12px;flex-direction:column}
#device-host .pl3[data-design="3"] .pl3-head>div{width:100%}
#device-host .pl3[data-design="3"] .pl3-head .pl3-eyebrow,#device-host .pl3[data-design="3"] .pl3-next{display:none}
#device-host .pl3[data-design="3"] .pl3-head>div>span{justify-content:center;gap:12px}
#device-host .pl3[data-design="3"] .pl3-progress{width:150px;margin:8px auto 0}
#device-host .pl3[data-design="3"] .pl3-space{top:48px}
#device-host .pl3[data-design="3"] .pl3-map-label{border-radius:20px;padding:8px 12px;background:#0b0d11e8}
#device-host .pl3[data-design="3"] .pl3-controls strong{font-size:16px}
#device-host .pl3[data-design="3"] .pl3-aurora{inset:-80px -80px 40px;transform:scaleX(.85)}
/* 04 — Chapter tabs / sweeping, offset route */
#device-host .pl3[data-design="4"] .pl3-head{padding:8px 18px}
#device-host .pl3[data-design="4"] .pl3-next,#device-host .pl3[data-design="4"] .pl3-eyebrow{display:none}
#device-host .pl3[data-design="4"] .pl3-chapters{display:flex;margin-top:6px}
#device-host .pl3[data-design="4"] .pl3-space{top:60px}
#device-host .pl3[data-design="4"] .pl3-controls{padding:0 16px 10px}
#device-host .pl3[data-design="4"] .pl3-controls>div{flex:1;align-items:flex-start;padding-left:14px}
#device-host .pl3[data-design="4"] .pl3-controls strong{font-size:16px}
#device-host .pl3[data-design="4"] .pl3-aurora{inset:-160px -140px 40px;transform:rotate(18deg)}
/* 05 — Floating minimal HUD / tight switchbacks */
#device-host .pl3[data-design="5"] .pl3-head{margin:10px 20px;padding:9px 12px;border-radius:40px;background:#0b0d10df;border:1px solid #ffffff22;gap:10px}
#device-host .pl3[data-design="5"] .pl3-head>div>strong{font-size:16px}
#device-host .pl3[data-design="5"] .pl3-eyebrow,#device-host .pl3[data-design="5"] .pl3-next,#device-host .pl3[data-design="5"] .pl3-progress{display:none}
#device-host .pl3[data-design="5"] .pl3-controls{background:transparent}
#device-host .pl3[data-design="5"] .pl3-controls>div{background:#0d0f12ed;border:1px solid #ffffff24;border-radius:30px;padding:8px 20px}
#device-host .pl3[data-design="5"] .pl3-controls strong{font-size:15px}
#device-host .pl3[data-design="5"] .pl3-arrow{border-radius:50%}
#device-host .pl3[data-design="5"] .pl3-aurora{inset:-240px -60px 20px;filter:brightness(.85)}
/* 06 — Bottom dashboard / cinematic long approach */
#device-host .pl3[data-design="6"] .pl3-head{position:absolute;bottom:154px;left:16px;right:16px;padding:12px 14px;border:1px solid #ffffff24;border-radius:16px;background:#101216f2}
#device-host .pl3[data-design="6"] .pl3-next{display:none}
#device-host .pl3[data-design="6"] .pl3-space{bottom:230px}
#device-host .pl3[data-design="6"] .pl3-space>canvas{mask-image:linear-gradient(transparent,#000 45px,#000 85%,transparent)}
#device-host .pl3[data-design="6"] .pl3-aurora{inset:-220px -60px 120px}
#device-host .pl3[data-design="6"] .pl3-controls strong{font-size:16px}
/* 07 — Editorial title / asymmetric sweeping route */
#device-host .pl3[data-design="7"] .pl3-head{flex-direction:row-reverse;align-items:flex-start;padding:16px 22px 10px}
#device-host .pl3[data-design="7"] .pl3-head>div>strong{font-size:24px;line-height:28px;max-width:190px}
#device-host .pl3[data-design="7"] .pl3-head>div>span{margin-top:10px}
#device-host .pl3[data-design="7"] .pl3-head .pl3-next{display:none}
#device-host .pl3[data-design="7"] .pl3-progress{height:2px}
#device-host .pl3[data-design="7"] .pl3-space{top:28px}
#device-host .pl3[data-design="7"] .pl3-map-label{border:0;border-radius:0;border-left:1px solid #ffffff55;background:linear-gradient(90deg,#111419f5,#111419a0);box-shadow:none}
#device-host .pl3[data-design="7"] .pl3-aurora{inset:-50px -220px 90px;transform:rotate(-22deg)}
#device-host .pl3[data-design="7"] .pl3-controls strong{font-size:16px}
/* 08 — Progress notebook / compact scene above a chapter selector */
#device-host .pl3[data-design="8"] .pl3-head{padding:12px 22px}
#device-host .pl3[data-design="8"] .pl3-head>div>span{flex-direction:row-reverse}
#device-host .pl3[data-design="8"] .pl3-progress{height:6px;background:repeating-linear-gradient(90deg,#ffffff22 0 8%,transparent 8% 10%)}
#device-host .pl3[data-design="8"] .pl3-progress i{mask-image:repeating-linear-gradient(90deg,#000 0 8%,transparent 8% 10%)}
#device-host .pl3[data-design="8"] .pl3-chapters{display:flex;position:absolute;bottom:156px;left:0;right:0}
#device-host .pl3[data-design="8"] .pl3-space{bottom:214px;top:10px}
#device-host .pl3[data-design="8"] .pl3-controls strong{font-size:16px}
#device-host .pl3[data-design="8"] .pl3-map-label{border-radius:10px;background:#181a1fe8;border-color:#ffffff30}
#device-host .pl3[data-design="8"] .pl3-aurora{inset:-180px -10px 150px;transform:scaleX(-1)}
/* 09 — Framed arena / thick glass switchbacks */
#device-host .pl3[data-design="9"] .pl3-head{margin:10px 14px 0;padding:12px 14px;border:1px solid #ffffff28;border-radius:18px 18px 0 0;background:#111318e8}
#device-host .pl3[data-design="9"] .pl3-next{display:none}
#device-host .pl3[data-design="9"] .pl3-space{left:14px;right:14px;top:82px;bottom:156px;border-left:1px solid #ffffff20;border-right:1px solid #ffffff20;border-bottom:1px solid #ffffff20;border-radius:0 0 18px 18px;background:#05060722}
#device-host .pl3[data-design="9"] .pl3-space>canvas{mask-image:linear-gradient(transparent,#000 50px,#000 88%,transparent)}
#device-host .pl3[data-design="9"] .pl3-controls{padding:0 16px 12px}
#device-host .pl3[data-design="9"] .pl3-controls strong{font-size:16px}
#device-host .pl3[data-design="9"] .pl3-aurora{inset:-120px 14px 100px;border-radius:20px}
#device-host .pl3[data-design="9"] .pl3-map-label{border-color:#cc916d55}
/* 10 — League passport / diagonal flight and flat reward tickets */
#device-host .pl3[data-design="10"] .pl3-head{padding:12px 20px;gap:16px;background:linear-gradient(120deg,#252028aa,#090a0b40);border-bottom:1px solid #ffffff24}
#device-host .pl3[data-design="10"] .pl3-head>div>strong{font-size:21px;line-height:26px}
#device-host .pl3[data-design="10"] .pl3-next{display:none}
#device-host .pl3[data-design="10"] .pl3-space{top:14px}
#device-host .pl3[data-design="10"] .pl3-map-label{border-radius:3px;padding:8px 14px;background:#18191ef2;border:1px solid #ffffff30;box-shadow:4px 4px 0 #0006}
#device-host .pl3[data-design="10"] .pl3-map-label[data-earned=true]{border-left:3px solid #d71921}
#device-host .pl3[data-design="10"] .pl3-controls{margin: auto 16px 10px;border-top:1px solid #ffffff24;padding:14px 0 0}
#device-host .pl3[data-design="10"] .pl3-controls strong{font-size:16px}
#device-host .pl3[data-design="10"] .pl3-arrow{border-radius:8px;width:48px;background:#17191e}
#device-host .pl3[data-design="10"] .pl3-aurora{inset:-200px -150px 40px;transform:rotate(25deg)}
/* Inset scene concepts project their marker into the scene's actual origin. */
#device-host .pl3[data-design="9"][data-current=true] .pl3-home{margin-left:14px}
#device-host .pl3:not([data-design="0"]):has(.pl3-prize[data-gate]) .pl3-space{bottom:210px}
#device-host .pl3[data-design="6"]:has(.pl3-prize[data-gate]) .pl3-space{bottom:310px}
#device-host .pl3[data-design="6"]:has(.pl3-prize[data-gate]) .pl3-head{bottom:230px}
#device-host .pl3[data-design="8"]:has(.pl3-prize[data-gate]) .pl3-chapters{bottom:230px}
#device-host .pl3[data-design="8"]:has(.pl3-prize[data-gate]) .pl3-space{bottom:285px}
/* Reserve real space for lower HUDs rather than overlaying the map controls. */
#device-host .pl3[data-design="6"] .pl3-head{bottom:178px}
#device-host .pl3[data-design="6"]:not(:has(.pl3-prize[data-gate])) .pl3-space{bottom:282px}
#device-host .pl3[data-design="8"] .pl3-chapters{bottom:182px}
#device-host .pl3[data-design="8"]:not(:has(.pl3-prize[data-gate])) .pl3-space{bottom:258px}
#device-host .pl3[data-design="9"]:not(:has(.pl3-prize[data-gate])) .pl3-space{bottom:166px}
#device-host .pl3[data-design="6"]:has(.pl3-prize[data-gate]) .pl3-head{bottom:258px}
#device-host .pl3[data-design="6"]:has(.pl3-prize[data-gate]) .pl3-space{bottom:362px}
#device-host .pl3[data-design="8"]:has(.pl3-prize[data-gate]) .pl3-chapters{bottom:262px}
#device-host .pl3[data-design="8"]:has(.pl3-prize[data-gate]) .pl3-space{bottom:338px}

/* Opaque architectural stairs, with progress in the actual road header. */
#device-host .pl3[data-design="5"] .pl3-head{border-radius:20px;padding:14px 16px;margin:10px 16px;align-items:flex-start;background:#101216}
#device-host .pl3[data-design="5"] .pl3-head>.pdc{margin-top:3px}
#device-host .pl3[data-design="5"] .pl3-progress{display:block;height:7px;margin:10px 0 7px;background:#ffffff18}
#device-host .pl3[data-design="5"] .pl3-progress>i{background:linear-gradient(90deg,#d71921,#ff5965);border-radius:inherit}
#device-host .pl3[data-design="5"] .pl3-next{display:block;margin:0;color:#c3c8d0;font:400 12px/16px var(--pd-font)}
#device-host .pl3[data-design="5"] .pl3-space>canvas{mask-image:linear-gradient(transparent 0,transparent 94px,#000 138px);opacity:1}