#device-host .fr-hub-scroll:has(.pl2){padding:0!important;overflow:hidden!important;display:flex;flex-direction:column}
#device-host .pl2{position:relative;isolation:isolate;display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;background:#050607;color:#f0f2f5;font-family:var(--pd-font,'Play',sans-serif)}
#device-host .pl2 *{box-sizing:border-box}
#device-host .pl2-bg{position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:var(--journey-aurora,.7);filter:brightness(var(--journey-light,1))}
#device-host .pl2-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(#050607bb,transparent 40%,#050607 94%)}
#device-host .pl2-head{display:flex;align-items:center;gap:12px;flex:none;padding:14px 16px;margin:10px 16px 4px;border:1px solid #ffffff20;border-radius:20px;background:#101216;z-index:2;appearance:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .18s,background-color .18s}
@media(hover:hover){#device-host .pl2-head:hover{border-color:#ffffff40;background:#14171c}}
#device-host .pl2-head:active{border-color:#ffffff60;background:#181b21}
#device-host .pl2-head-copy{flex:1;min-width:0}
#device-host .pl2-head-copy>strong{display:block;font-size:16px;line-height:20px;margin-bottom:6px}
#device-host .pl2-head-meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:16px;color:#a9adb7}
#device-host .pl2-head-meta>span:last-child{color:#e0e3e8;white-space:nowrap}
#device-host .pl2-progress{display:block;height:6px;margin:9px 0 7px;background:#ffffff18;border-radius:4px;overflow:hidden}
#device-host .pl2-progress i{display:block;height:100%;background:linear-gradient(90deg,#d71921,#ff5965);border-radius:inherit}
#device-host .pl2-next{display:block;color:#c3c8d0;font:400 12px/16px var(--pd-font)}
#device-host .pl2-viewport{flex:1;min-height:0;position:relative;overflow:clip;overscroll-behavior:contain;touch-action:none;outline:none;cursor:grab;mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 10px),transparent)}
#device-host .pl2-viewport:active{cursor:grabbing}
#device-host .pl2-viewport:focus-visible{box-shadow:inset 0 0 0 1px #ffffff66}
#device-host .pl2-flight{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(-10px 16px 12px #0008)}
#device-host .pl2-step{cursor:pointer;outline:none}
#device-host .pl2-tread{fill:url(#pl2-tread);stroke:#ffffff12;stroke-width:.7}
#device-host .pl2-riser{fill:url(#pl2-riser)}
#device-host .pl2-side{fill:#10151c;stroke:#68738640;stroke-width:.6}
#device-host .pl2-edge{fill:none;stroke:#b7c2d16b;stroke-width:1;stroke-linejoin:round}
#device-host .pl2-step-number{fill:#18242d;paint-order:stroke;stroke:#ffffff26;stroke-width:.5px;font:700 16px var(--pd-font);user-select:none}
#device-host .pl2-you-dot{fill:#ff344b}
#device-host .pl2-step[data-active=true] .pl2-step-number{fill:#101b23;font-size:20px}
#device-host .pl2-step[data-active=true] .pl2-you-dot{fill:#fff3ef}
#device-host .pl2-step-light{fill:none;stroke:#ffbbc1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px #ff193f) drop-shadow(0 0 14px #ed123b);animation:pl2-ignite .65s ease-out both}
#device-host .pl2-step:focus-visible .pl2-edge{stroke:#fff;stroke-width:2}
#device-host .pl2-step:not([data-active=true]):hover .pl2-edge{stroke:#fff}
#device-host .pl2-ambient{opacity:var(--journey-ambient,1);position:absolute;width:210px;height:160px;transform:translate(-25%,-40%);background:radial-gradient(ellipse,#d719212b,transparent 68%);pointer-events:none}
#device-host .pl2-selection{position:absolute;left:0;right:0;pointer-events:none}
#device-host .pl2-join{position:absolute;top:0;height:1px;background:linear-gradient(90deg,#e8496380,#ff9aab);box-shadow:0 0 8px #ff345644}
#device-host .pl2-join:after{content:'';position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:#ffb7c3;box-shadow:0 0 8px #ff3456}
#device-host .pl2-reward{position:absolute;left:16px;top:0;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translateY(-50%);min-height:166px;border:1px solid #6e3545;border-radius:16px;padding:12px 10px 14px;color:#f0f2f5;background:radial-gradient(ellipse at 50% 25%,#29212c 0,transparent 70%),#12151b;box-shadow:0 14px 24px #0005,inset 0 1px #ffffff09;animation:pl2-card-in .32s cubic-bezier(.2,.7,.2,1) both}
#device-host .pl2-reward-head{display:flex;align-items:center;justify-content:space-between;align-self:stretch;gap:4px;font:700 10px/14px var(--pd-font);letter-spacing:.09em;color:#c3a6af}
#device-host .pl2-check{display:grid;place-items:center;width:16px;height:16px;color:#50cc94;font-size:12px;letter-spacing:0}
#device-host .pl2-gift{display:grid;place-items:center;height:66px;width:100%;position:relative}
#device-host .pl2-gift:before{content:'';position:absolute;inset:8px 15px;background:radial-gradient(ellipse,#c6bcda1c,transparent 70%)}
#device-host .pl2-gift img{height:70px;width:70px;object-fit:contain;filter:drop-shadow(0 6px 5px #0007);user-select:none;-webkit-user-drag:none}
#device-host .pl2-reward-main{display:flex;flex-direction:column;align-items:center;gap:4px;font:700 16px/20px var(--pd-font)}
#device-host .pl2-prize{display:flex;align-items:center;gap:6px;white-space:nowrap}
#device-host .pl2-prize .pdv-ico{width:18px;height:18px;flex:none}
#device-host .pl2-extra{font:400 11px/15px var(--pd-font);color:#e2cad0;text-align:center}
#device-host .pl2-reward-status{font:400 11px/15px var(--pd-font);color:#9a9eab;text-align:center}
@keyframes pl2-ignite{0%{stroke:#fff;filter:drop-shadow(0 0 7px #ff3158) drop-shadow(0 0 20px #ff2e51)}100%{stroke:#ffbbc1;filter:drop-shadow(0 0 5px #ff193f) drop-shadow(0 0 14px #ed123b)}}
@keyframes pl2-card-in{from{opacity:0;transform:translate(-6px,calc(-50% + 4px))}to{opacity:1;transform:translate(0,-50%)}}
#device-host .pl2-footer{flex:none;z-index:2;padding:0 16px 36px;background:transparent}
#device-host .pl2-controls{padding:0;margin-bottom:12px;overflow:hidden}
/* One benefit: the percentage stays with its label and explanation. */
#device-host .pl2-bonus{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:var(--space-4);padding:var(--space-5)}
#device-host .pl2-bonus-copy{min-width:0}
#device-host .pl2-bonus-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--space-3);margin-bottom:var(--space-2)}
#device-host .pl2-bonus b{font:700 var(--pd-type-body)/var(--pd-leading-body) var(--pd-font)}
#device-host .pl2-bonus small{display:block;font:400 var(--pd-type-label)/var(--pd-leading-label) var(--pd-font);color:var(--pd-muted);text-wrap:pretty}
#device-host .pl2-bonus-value{font:700 var(--pd-type-submetric)/32px var(--pd-font);font-variant-numeric:tabular-nums;white-space:nowrap}
#device-host .pl2-rates svg{width:20px;height:20px;flex:none}
#device-host .pl2 .pl2-rates{width:100%}
#device-host .pl2 button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:360px){#device-host .pl2-reward{padding:10px 8px 12px;gap:5px;min-height:152px}#device-host .pl2-head{padding:12px;gap:8px}#device-host .pl2-head-meta{font-size:11px}#device-host .pl2-reward-main{font-size:14px}#device-host .pl2-reward-status{font-size:10px}#device-host .pl2-gift{height:60px}#device-host .pl2-gift img{width:64px;height:64px}}
@media(prefers-reduced-motion:reduce){#device-host .pl2 *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

#device-host .pl2-bg .pd-motion-canvas{position:absolute;inset:0;width:100%;height:100%;filter:brightness(1.2)}

#device-host .pl2-side{stroke:none}
#device-host .pl2-side-seam{stroke:#ffffff25;stroke-width:.8;fill:none}
#device-host .pl2-grain{fill:url(#pl2-wood-grain);mix-blend-mode:multiply;opacity:.75;pointer-events:none}
#device-host .pl2-step[data-material=wood] .pl2-step-number{fill:#fff1d5;stroke:#2a170a55}
#device-host .pl2-step[data-material=bronze] .pl2-step-number{fill:#2e1a0b;stroke:#f4ddba35}
#device-host .pl2-step[data-material=gold] .pl2-step-number{fill:#3a250a;stroke:#fff4c635}
#device-host .pl2-step[data-material=diamond] .pl2-step-number{fill:#193c56;stroke:#fff9}
#device-host .pl2-you-dot{fill:#e61837;stroke:#fff5;stroke-width:.6}
#device-host .pl2-step[data-active=true] .pl2-you-dot{fill:#d71921}
#device-host .pl2-side-ribbon{stroke:#f1f5ff88;stroke-width:5;fill:none}
#device-host .pl2-side-groove{stroke:#080e1866;stroke-width:3;fill:none}
#device-host .pl2-bevel{fill:none;stroke:#ffffff99;stroke-width:1.4;stroke-linejoin:round}
#device-host .pl2-tread-inset{stroke:#10172280;stroke-width:3;fill:none}
#device-host .pl2[data-variant="2"] .pl2-tread{stroke-width:2;stroke:#ffffff6b}
#device-host .pl2[data-variant="3"] .pl2-step-number{font-size:21px}
#device-host .pl2[data-variant="4"] .pl2-edge{stroke-width:2;stroke:#ffffff90}
#device-host .pl2[data-variant="5"] .pl2-step-number{font-size:15px;letter-spacing:.1em}
#device-host .pl2[data-material=gold] .pl2-reward{background:radial-gradient(ellipse at 50% 25%,#3a3020,transparent 70%),#12151b}
#device-host .pl2[data-material=diamond] .pl2-reward{background:radial-gradient(ellipse at 50% 25%,#223a46,transparent 70%),#12151b}
#device-host .pl2[data-material=wood] .pl2-reward{background:radial-gradient(ellipse at 50% 25%,#33261f,transparent 70%),#12151b}
@media(max-height:740px){#device-host .pl2-head{padding:10px 12px;margin-top:4px}#device-host .pl2-footer{padding-bottom:36px}}

/* sy56: continuous camera-projected flights with real surface maps. */
#device-host .pl2-surface-texture{mix-blend-mode:multiply;pointer-events:none}
#device-host .pl2-step-number{font-size:22px!important;letter-spacing:0!important}
#device-host .pl2-step[data-active=true] .pl2-step-number{font-size:25px!important}
#device-host .pl2-flight{filter:drop-shadow(-5px 10px 8px #0007)}
#device-host .pl2-edge{stroke:#eff7ff8c;stroke-width:.7!important}
#device-host .pl2-step-light{stroke-width:1.7}
#device-host .pl2-tread{stroke-width:.5!important;stroke:#ffffff33!important}

/* sy57: grounded sidewalls, full selected step and continuous backdrop. */
#device-host .pl2-face-side{pointer-events:none}
#device-host .pl2-active-surfaces{pointer-events:none}
#device-host .pl2-active-top{fill:#ff637a;fill-opacity:.20}
#device-host .pl2-active-front{fill:#ff637a;fill-opacity:.24}
#device-host .pl2-bg .pd-motion-canvas{z-index:0}
#device-host .pl2-bg:after{z-index:1;background:linear-gradient(#05060799 0%,transparent 28%,#05060755 58%,#050607e8 84%,#050607 100%)}

#device-host .pl2-support-wall{pointer-events:none}

/* Opaque architectural surfaces: no alpha masks on the flight. */
#device-host .pl2-viewport{mask-image:none}

/* Calm centered reward composition; same for all finishes. */
#device-host .pl2-reward{border-color:#ffffff21;border-radius:var(--radius-lg);background:#11151a!important;box-shadow:0 12px 28px #0006,inset 0 1px #ffffff08;padding-top:16px;padding-bottom:16px;gap:8px}
#device-host .pl2-reward-head{position:relative;display:block;text-align:center;color:var(--pd-muted);font:400 var(--pd-type-caption)/var(--pd-leading-caption) var(--pd-font);letter-spacing:0}
#device-host .pl2-check{position:absolute;right:0;top:0;font-size:10px;color:#71a890}
#device-host .pl2-reward-status{color:#8c939e}
#device-host .pl2-join{opacity:.6}
#device-host .pl2[data-finish="2"] .pl2-step-number,#device-host .pl2[data-finish="4"] .pl2-step-number,#device-host .pl2[data-finish="5"] .pl2-step-number{fill:#d2dae1;stroke:#1116}
#device-host .pl2[data-finish="3"] .pl2-step-number{fill:#e4eaf0;stroke:#18212a88}
#device-host .pl2[data-finish="1"] .pl2-active-top{fill-opacity:.12}
#device-host .pl2[data-finish="5"] .pl2-step-light{stroke:#ffd3da;filter:drop-shadow(0 0 4px #f31c46) drop-shadow(0 0 12px #ff314d)}

#device-host .pl2[data-finish="6"] .pl2-step-number,#device-host .pl2[data-finish="8"] .pl2-step-number,#device-host .pl2[data-finish="9"] .pl2-step-number,#device-host .pl2[data-finish="11"] .pl2-step-number,#device-host .pl2[data-finish="12"] .pl2-step-number,#device-host .pl2[data-finish="13"] .pl2-step-number,#device-host .pl2[data-finish="15"] .pl2-step-number{fill:#dde6ed;stroke:#1117}
#device-host .pl2[data-finish="7"] .pl2-step-number,#device-host .pl2[data-finish="10"] .pl2-step-number,#device-host .pl2[data-finish="14"] .pl2-step-number{fill:#17222b;stroke:#fff3}
#device-host .pl2[data-finish="12"] .pl2-step-number{font-size:19px!important}

/* The selected tread and riser breathe together; the solid stair stays still. */
#device-host .pl2-active-top{animation:pl2-pulse-top 2s ease-in-out infinite}
#device-host .pl2-active-front{animation:pl2-pulse-front 2s ease-in-out infinite}
#device-host .pl2-step-light{animation:pl2-pulse-edge 2s ease-in-out infinite}
@keyframes pl2-pulse-top{0%,100%{fill-opacity:.14}50%{fill-opacity:.34}}
@keyframes pl2-pulse-front{0%,100%{fill-opacity:.18}50%{fill-opacity:.38}}
@keyframes pl2-pulse-edge{0%,100%{stroke:#ff8c9f;opacity:.72;filter:drop-shadow(0 0 3px #ff193f) drop-shadow(0 0 8px #ed123b)}50%{stroke:#ffe3e7;opacity:1;filter:drop-shadow(0 0 6px #ff193f) drop-shadow(0 0 18px #ed123b)}}
#device-host .pl2[data-finish="15"] .pl2-step[data-material="wood"] .pl2-step-number{fill:#493520;stroke:#fff5;stroke-width:.35}

#device-host .pl2-reward[data-milestone=true]{border-color:var(--league-ink);gap:6px;box-shadow:0 12px 28px #0006,inset 0 3px var(--league-ink)}
#device-host .pl2-reward[data-milestone=true] .pl2-reward-head{color:var(--league-ink);font:700 var(--pd-type-caption)/var(--pd-leading-caption) var(--pd-font);text-transform:uppercase;letter-spacing:.04em}
#device-host .pl2-reward[data-milestone=true] .pl2-gift{height:56px}
#device-host .pl2-reward[data-milestone=true] .pl2-gift .pde-img img{width:100%;height:100%}
#device-host .pl2-milestone-name{text-align:center;font:700 var(--pd-type-body)/20px var(--pd-font);color:var(--pd-ink)}
#device-host .pl2-milestone-bonus{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:2px}
#device-host .pl2-milestone-bonus b{font:700 var(--pd-type-title)/24px var(--pd-font);color:var(--league-ink)}
#device-host .pl2-milestone-bonus small,#device-host .pl2-reward[data-milestone=true] .pl2-extra,#device-host .pl2-reward[data-milestone=true] .pl2-reward-status{font:400 var(--pd-type-caption)/var(--pd-leading-caption) var(--pd-font);color:var(--pd-muted)}
#device-host .pl2-gate-number{font:700 14px var(--pd-font);fill:#fff;text-anchor:middle;dominant-baseline:middle}

/* sy82: restrained selection lets the milestone material keep its colour. */
#device-host .pl2-step[data-surface-finish] .pl2-active-top,
#device-host .pl2-step[data-surface-finish] .pl2-active-front{fill-opacity:.025;animation:pl2-material-pulse 2s ease-in-out infinite}
#device-host .pl2-step[data-surface-finish] .pl2-step-light{stroke:#f34b63;stroke-width:1.1;opacity:.85;filter:drop-shadow(0 0 3px #e91f43);animation:pl2-material-edge 2s ease-in-out infinite}
@keyframes pl2-material-pulse{0%,100%{fill-opacity:.015}50%{fill-opacity:.055}}
@keyframes pl2-material-edge{0%,100%{stroke:#ec3c56;opacity:.7;filter:drop-shadow(0 0 2px #ed123b)}50%{stroke:#ff7186;opacity:1;filter:drop-shadow(0 0 5px #ed123b)}}

/* Keep the live level number clear inside the carved laurel. */
#device-host .pl2-step[data-carving] .pl2-step-number{font-size:22px!important}
#device-host .pl2-milestone-bonus small{max-width:132px;text-wrap:balance;line-height:16px}
/* The final arrival is a single scene, with the reward below it. */
#device-host .pl2[data-olympus=integrated] .pl2-flight{filter:drop-shadow(0 10px 18px #0008)}
#device-host .pl2[data-olympus=integrated] .pl2-reward{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:20px 22px;align-items:center;gap:2px 10px;min-height:0;padding:10px 12px;border-radius:12px;border:1px solid #58667455;box-shadow:0 5px 20px #0004;background:#101820eb!important;animation:none}
#device-host .pl2[data-olympus=integrated] .pl2-gift{grid-column:1;grid-row:1/3;width:44px;height:44px!important}
#device-host .pl2[data-olympus=integrated] .pl2-gift img{width:44px;height:44px}
#device-host .pl2[data-olympus=integrated] .pl2-gift .pde-img{width:44px!important;height:44px!important}
#device-host .pl2[data-olympus=integrated] .pl2-reward-head{grid-column:2;grid-row:1;text-align:left;align-self:center;font:400 14px/20px var(--pd-font);letter-spacing:0;color:#aab2bc}
#device-host .pl2[data-olympus=integrated] .pl2-milestone-name{grid-column:2;grid-row:2;font:700 16px/22px var(--pd-font);text-align:left;color:#eef2f5}
#device-host .pl2[data-olympus=integrated] .pl2-reward-main{grid-column:3;grid-row:1/3;font:700 16px/22px var(--pd-font)}
#device-host .pl2[data-olympus=integrated] .pl2-reward:not([data-milestone]) .pl2-reward-status{grid-column:2;grid-row:2;text-align:left;font:400 14px/20px var(--pd-font)}
#device-host .pl2[data-olympus=integrated] .pl2-milestone-bonus,#device-host .pl2[data-olympus=integrated] .pl2-extra,#device-host .pl2[data-olympus=integrated] .pl2-reward[data-milestone] .pl2-reward-status{display:none}
#device-host .pl2[data-olympus=integrated] .pl2-reward{background:#101820!important}

/* The summit has breathing room around one hero object. */
#device-host .pl2[data-olympus=integrated] .pl2-viewport{mask-image:none}
#device-host .pl2[data-olympus=integrated] .pl2-flight{mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 12px),transparent)}

/* sy98: floating chrome wreath; transparent overlay, existing stairs untouched. */
#device-host .pl2-laurel{position:absolute;pointer-events:none;z-index:1;isolation:isolate}
#device-host .pl2-laurel-canvas,#device-host .pl2-laurel-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 2px #d7f4ff99) drop-shadow(0 0 8px #a4d9ef40)}
#device-host .pl2-laurel-canvas{transition:opacity .25s}
#device-host .pl2-laurel-fallback[hidden]{display:none}
#device-host .pl2-laurel-groundlight{position:absolute;left:26%;right:26%;bottom:-20%;height:14%;border-radius:50%;background:radial-gradient(ellipse,#c9edff35,transparent 70%);transform:rotate(-5deg);pointer-events:none}

/* Tall league-entry faces carry a single readable number inside the embossed laurel. */
#device-host .pl2-step[data-entry-block=true] .pl2-step-number{font-size:40px!important;font-weight:750}

/* Undiscovered rewards show only the level and its unopened present. */
#device-host .pl2-reward[data-earned=false]{min-height:148px;gap:12px;justify-content:center}
#device-host .pl2-reward[data-earned=false] .pl2-gift{height:88px}
#device-host .pl2-reward[data-earned=false] .pl2-gift img{width:88px;height:88px}

#device-host .pl2::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;background:var(--olympus-sky,#050607);opacity:var(--olympus-sky-opacity,0)}

/* Summit sky stays behind the aurora and appears only at the final arrival. */
#device-host .pl2[data-olympus-five=true]{--olympus-sky:radial-gradient(ellipse at 62% 26%,#31161e 0,#100e12 45%,#07090c 85%)}
#device-host .pl2[data-olympus-five=true] .pl2-flight{filter:none;mask-image:linear-gradient(#000 0,#000 calc(100% - 12px),transparent)}
#device-host .pl2[data-olympus-five=true] .pl2-selection .pl2-reward{min-height:62px}

/* sy145: native summit scenes keep the same phone layout and reward behavior. */
#device-host .pl2[data-olympus-world] .pl2-reward[data-earned=false]{grid-template-columns:44px 1fr;grid-template-rows:44px;gap:12px;align-items:center;justify-content:start;padding:8px 14px;min-height:62px;background:#101318!important;border-color:#ffffff1c}
#device-host .pl2[data-olympus-world] .pl2-reward[data-earned=false] .pl2-gift{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px!important;margin:0}
#device-host .pl2[data-olympus-world] .pl2-reward[data-earned=false] .pl2-gift img{width:44px!important;height:44px!important;object-fit:contain;transform:none}
#device-host .pl2[data-olympus-world] .pl2-reward[data-earned=false] .pl2-reward-head{grid-column:2;grid-row:1;text-align:left;font:400 14px/20px var(--pd-font);letter-spacing:0;text-transform:none;color:var(--pd-muted)}

/* sy146: clouds belong to the destination, with a quiet atmospheric backdrop. */
#device-host .pl2[data-olympus-environment="7"],#device-host .pl2[data-olympus-environment="11"],#device-host .pl2[data-olympus-environment="12"],#device-host .pl2[data-olympus-environment="13"],#device-host .pl2[data-olympus-environment="14"],#device-host .pl2[data-olympus-environment="15"],#device-host .pl2[data-olympus-environment="16"],#device-host .pl2[data-olympus-environment="17"],#device-host .pl2[data-olympus-environment="18"],#device-host .pl2[data-olympus-environment="19"],#device-host .pl2[data-olympus-environment="20"],#device-host .pl2[data-olympus-environment="21"],#device-host .pl2[data-olympus-environment="22"],#device-host .pl2[data-olympus-environment="23"],#device-host .pl2[data-olympus-environment="24"],#device-host .pl2[data-olympus-environment="25"],#device-host .pl2[data-olympus-environment="26"],#device-host .pl2[data-olympus-environment="27"],#device-host .pl2[data-olympus-environment="28"],#device-host .pl2[data-olympus-environment="29"],#device-host .pl2[data-olympus-environment="30"]{--olympus-sky:radial-gradient(ellipse at 65% 28%,#3b2a38 0,#1b1d2a 35%,#0a0c12 68%,#07090c 90%)}
/* sy147: layered wind and slow billowing, anchored to the scene camera. */
#device-host .pl2-cloud-drift{pointer-events:none;animation:pl2-cloud-wind var(--cloud-wind-time,22s) ease-in-out infinite alternate;animation-delay:var(--cloud-phase,0s)}
#device-host .pl2-cloud-billow{animation:pl2-cloud-billow var(--cloud-billow-time,16s) ease-in-out infinite alternate;animation-delay:var(--cloud-phase,0s);transform-origin:var(--cloud-origin)}
@keyframes pl2-cloud-wind{from{transform:translate(calc(-1 * var(--cloud-dx)),var(--cloud-dy))}to{transform:translate(var(--cloud-dx),calc(-1 * var(--cloud-dy)))}}
@keyframes pl2-cloud-billow{0%{transform:scale(1,.95) rotate(-.6deg)}50%{transform:scale(1.07,1.08) rotate(.8deg)}100%{transform:scale(1.13,.99) rotate(-.3deg)}}
@media(prefers-reduced-motion:reduce){#device-host .pl2-cloud-drift,#device-host .pl2-cloud-billow{animation:none}}


/* sy150: a separate near layer crosses the actual treads, below cards/controls. */
#device-host .pl2-cloud-foreground{pointer-events:none}
#device-host .pl2-cloud-near .pl2-cloud-billow{animation-name:pl2-cloud-near-billow}
@keyframes pl2-cloud-near-billow{0%{transform:scale(.98,.88) rotate(-1.2deg)}50%{transform:scale(1.09,1.12) rotate(1deg)}100%{transform:scale(1.16,.96) rotate(-.4deg)}}

/* sy152: selection is light on the stair itself, consistent in every league. */
#device-host .pl2 .pl2-step{--step-aura:#edf5ff}
#device-host .pl2 .pl2-step[data-material=wood]{--step-aura:#ffe0a8}
#device-host .pl2 .pl2-step[data-material=bronze]{--step-aura:#ffd3ad}
#device-host .pl2 .pl2-step[data-material=gold]{--step-aura:#ffe7aa}
#device-host .pl2 .pl2-step[data-material=diamond]{--step-aura:#ff6278}
#device-host .pl2 .pl2-step:not([data-active=true]) :is(.pl2-step-number,.pl2-junction-number,.pl2-summit-number,.pl2-gate-number){fill:#30271f!important;stroke:none!important;filter:none!important;opacity:.76}
/* Readable across both bright and dark bands of brushed silver, without the current-step glow. */
#device-host .pl2 .pl2-step[data-material=silver]:not([data-active=true]) :is(.pl2-step-number,.pl2-junction-number){fill:#dce3eb!important;stroke:#111923!important;stroke-width:1.5px;stroke-linejoin:round;paint-order:stroke fill;opacity:1}
#device-host .pl2 .pl2-step[data-material=silver]:not([data-active=true]):not([data-entry-block=true]) .pl2-step-number{font-size:24px!important}
#device-host .pl2 .pl2-step:is([data-material=bronze],[data-material=gold]):not([data-active=true]) :is(.pl2-step-number,.pl2-junction-number){fill:#c2b49e!important;stroke:#16120c88!important;stroke-width:.45;opacity:.80}
#device-host .pl2 .pl2-step[data-material=diamond]:not([data-active=true]) :is(.pl2-step-number,.pl2-junction-number,.pl2-summit-number){fill:#ceafb5!important;opacity:.68}
#device-host .pl2 .pl2-step[data-active=true] :is(.pl2-step-number,.pl2-junction-number,.pl2-summit-number,.pl2-gate-number){fill:#fff!important;stroke:none!important;opacity:1;filter:drop-shadow(0 1px 1.5px #080b10) drop-shadow(0 0 3px #fff9) drop-shadow(0 0 8px var(--step-aura))!important}
#device-host .pl2 .pl2-step .pl2-active-surfaces{filter:drop-shadow(0 0 8px var(--step-aura))}
#device-host .pl2 .pl2-step .pl2-active-top{fill:#fff;fill-opacity:.32;animation:pl2-selected-surface 2.8s ease-in-out infinite}
#device-host .pl2 .pl2-step .pl2-active-front{fill:#fff;fill-opacity:.22;animation:pl2-selected-front 2.8s ease-in-out infinite}
#device-host .pl2 .pl2-step .pl2-step-light{stroke:#fff!important;stroke-width:2.3!important;opacity:1;filter:drop-shadow(0 0 3px #fffc) drop-shadow(0 0 10px var(--step-aura));animation:pl2-selected-edge 2.8s ease-in-out infinite}
@keyframes pl2-selected-surface{0%,100%{fill-opacity:.14}50%{fill-opacity:.44}}
@keyframes pl2-selected-front{0%,100%{fill-opacity:.10}50%{fill-opacity:.31}}
@keyframes pl2-selected-edge{0%,100%{opacity:.72;filter:drop-shadow(0 0 1.5px #fff9) drop-shadow(0 0 3px var(--step-aura))}50%{opacity:1;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 16px var(--step-aura))}}

/* Keep reward cards steady while the continuous camera moves past levels. */
#device-host .pl2[data-scrolling=true] .pl2-reward{animation:none}

/* sy160: three destinations have their own light, revealed only on arrival. */
#device-host .pl2[data-olympus-environment="31"]{--olympus-sky:radial-gradient(ellipse at 66% 30%,#48412e 0,#1a2824 40%,#090f10 76%,#07090c 100%)}
#device-host .pl2[data-olympus-environment="32"]{--olympus-sky:radial-gradient(ellipse at 58% 30%,#253b50 0,#101a2d 45%,#080c14 78%,#07090c 100%)}
#device-host .pl2[data-olympus-environment="33"]{--olympus-sky:radial-gradient(ellipse at 60% 25%,#51412e 0,#25202b 43%,#0e111b 77%,#07090c 100%)}

/* Poker paradise: a warm cloud horizon at the end of the journey. */
#device-host .pl2[data-olympus-environment="34"]{--olympus-sky:radial-gradient(ellipse at 63% 29%,#6c6152 0,#363438 33%,#17222d 66%,#090d14 100%)}

/* sy180: earned level, rather than scroll position, opens the summit. */
#device-host .pl2-summit-content[data-unlocked=false]{opacity:0;visibility:hidden}
#device-host .pl2-summit-content[data-unlocked=true]{opacity:1}
#device-host .pl2-summit-veil-drift{animation:pl2-summit-veil-drift var(--veil-time) ease-in-out infinite alternate;animation-delay:var(--veil-phase)}
#device-host .pl2-summit-veil-breathe{transform-origin:800px 800px;animation:pl2-summit-veil-breathe 11s ease-in-out infinite alternate}
#device-host .pl2-summit-veil-glimpse{animation:pl2-summit-veil-glimpse 19s ease-in-out infinite}
#device-host .pl2-summit-cloud-cover[data-unlocked=true]{animation:pl2-summit-open 3.8s cubic-bezier(.2,.65,.25,1) forwards}
@keyframes pl2-summit-veil-drift{from{transform:translate(calc(-1 * var(--veil-dx)),var(--veil-dy))}to{transform:translate(var(--veil-dx),calc(-1 * var(--veil-dy)))}}
@keyframes pl2-summit-veil-breathe{from{transform:scale(1,.98)}to{transform:scale(1.07,1.04)}}
@keyframes pl2-summit-veil-glimpse{0%,57%,76%,100%{opacity:1}65%,69%{opacity:.15}}
@keyframes pl2-summit-open{0%{opacity:1;transform:translate(0,0)}35%{opacity:.9}100%{opacity:0;visibility:hidden;transform:translate(-180px,100px)}}
@media(prefers-reduced-motion:reduce){#device-host .pl2-summit-content,#device-host .pl2-summit-veil-drift,#device-host .pl2-summit-veil-breathe,#device-host .pl2-summit-veil-glimpse{animation:none}#device-host .pl2-summit-cloud-cover[data-unlocked=true]{animation:none;opacity:0}}

#device-host .pl2-summit-cloud-cover[data-unlocked=false]{opacity:1}
@media(prefers-reduced-motion:reduce){#device-host .pl2-summit-cloud-cover[data-unlocked=false]{animation:none;opacity:1}}

/* sy181: persistent sky clouds move behind the summit after the foreground veil opens. */
#device-host .pl2-summit-sky-drift{animation:pl2-summit-sky-wind var(--sky-cloud-time) ease-in-out infinite alternate;animation-delay:var(--sky-cloud-phase)}
#device-host .pl2-summit-sky-billow{animation:pl2-summit-sky-billow 17s ease-in-out infinite alternate;animation-delay:var(--sky-cloud-phase)}
@keyframes pl2-summit-sky-wind{from{transform:translate(calc(-1 * var(--sky-cloud-dx)),var(--sky-cloud-dy))}to{transform:translate(var(--sky-cloud-dx),calc(-1 * var(--sky-cloud-dy)))}}
@keyframes pl2-summit-sky-billow{from{transform:scale(1,.96)}to{transform:scale(1.09,1.05)}}
@media(prefers-reduced-motion:reduce){#device-host .pl2-summit-sky-drift,#device-host .pl2-summit-sky-billow{animation:none}}