/* A single continuous atmosphere behind the menu, never above controls. */
#device-host [data-app-root]{isolation:isolate;background:#000!important}
.sy-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;background:#000}
.sy-veil{position:absolute;inset:-24% -28% -4%;opacity:.6;transform:none;filter:none}
.sy-veil canvas{position:absolute;inset:0;width:100%;height:100%}
.sy-shade{position:absolute;inset:0;background:linear-gradient(#000b,transparent 28%,#0002 65%,#000c),radial-gradient(ellipse at 50% 50%,transparent 25%,#0008)}
#device-host .pd-lobby-underlay{background:transparent!important}
#device-host .pd-lobby-underlay[aria-hidden=true]{visibility:hidden}
#device-host .sy-menu-surface,#device-host .ps-profile-screen,#device-host .me-screen,#device-host .pds-hub{background:transparent!important}
#device-host .ps-profile-ambient{display:none}
#device-host .fr-hub-scroll{background:transparent}
#device-host .pd-route-header,#device-host .pd-screen-header{background:linear-gradient(#05070bea,#05070b85)!important}
.sy-demo{margin:24px 20px 12px;padding:14px 16px;border:1px solid #ffffff18;border-radius:16px;background:#0c1018c9;color:#e7ebf1;font:13px/1.5 var(--pd-font,'Play',sans-serif)}
.sy-demo summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}
.sy-demo summary::-webkit-details-marker{display:none}.sy-demo summary span{letter-spacing:.18em;font-weight:700;font-size:11px}.sy-demo summary small{color:#949fae;font-size:11px}.sy-demo p{color:#a4afbe;margin:16px 0;font-size:12px}.sy-demo-presets,.sy-demo-actions{display:flex;gap:8px}.sy-demo button{flex:1;min-height:36px;border:1px solid #ffffff1c;border-radius:9px;background:#ffffff06;color:#dce2eb;font:12px var(--pd-font,'Play',sans-serif);cursor:pointer}.sy-demo button[aria-pressed=true]{border-color:#c7768155;background:#932d3a22}.sy-demo label{display:flex;align-items:center;gap:12px;margin:16px 0;color:#aab3c0}.sy-demo input{min-width:0;flex:1;accent-color:#d71921}.sy-demo-state{display:block;color:#8794a7;margin-top:12px;font-size:11px}
#device-host .pd-career{background:transparent!important}/* The safe illustration uses the remaining height; its footer never forces a cropped scroll. */
#device-host .fr-deal[data-safe]{overflow:hidden;display:flex;flex-direction:column}
#device-host .fr-deal[data-safe]>.pd-route-header{flex:0 0 auto}
#device-host .fr-deal[data-safe]>.frd-top{flex:0 0 auto;padding:12px 20px 4px}
#device-host .fr-deal[data-safe]>.frd-safe-stage{flex:1 1 0;min-height:100px;width:100%;height:auto;aspect-ratio:auto;overflow:hidden;padding:12px 16px;display:flex;align-items:center;justify-content:center}
#device-host .fr-deal[data-safe] .frd-safe-stage>.pds-art{width:auto;height:100%;max-width:100%;max-height:360px;aspect-ratio:262/319;flex:0 1 auto}
#device-host .fr-deal[data-safe]>.frd-panel{flex:0 0 auto;margin:0 16px;padding:18px 20px;border-radius:20px}
#device-host .fr-deal[data-safe]>.frd-footer{position:relative;bottom:auto;flex:0 0 auto;padding:16px 16px 24px;background:none}
#device-host .fr-deal[data-safe] .pdv-pay-sub{margin-top:8px}
.pd-statue-thumb{display:block;width:100%;height:100%;pointer-events:none}
.pd-statue-thumb .pd-st3d{display:block;width:100%;height:100%;position:relative}
.pd-statue-thumb .pd-st3d-loading{font-size:0}
@media(max-height:720px){#device-host .fr-deal[data-safe] .frd-safe-stage>.pds-art{max-height:280px}#device-host .fr-deal[data-safe]>.frd-panel{padding:14px 18px}#device-host .fr-deal[data-safe]>.frd-footer{padding:12px 16px 20px}}

/* Solid tile bases: decorative gradients blend with the tile, never with the aurora. */
#device-host .pd-lobby-underlay .sy-solid-tile{background-color:#0b0d10!important}
#device-host .pd-lobby-underlay [data-lobby-activity]{background-color:#0b0d10!important}
#device-host .sy-demo{background:#0c1015}

/* League-road cleanup: a continuous black top, precise controls and explicit selection. */
#device-host .pds-hub:has(.pl3)>.pd-route-header{background:#000!important}
#device-host .pl3{background:#000}
#device-host .pl3::after{content:'';position:absolute;inset:0 0 auto;height:150px;background:linear-gradient(#000 0%,#000c 32%,transparent 100%);z-index:2;pointer-events:none}
#device-host .pl3-head{z-index:3}
#device-host .pl3-arrow{display:grid;place-items:center;padding:0;line-height:1}
#device-host .pl3-arrow svg{display:block;flex:none}
#device-host .pl3-controls{padding-bottom:16px}
#device-host .pl3-foot{padding-top:0;background:#000}
#device-host .pl3[data-current=true] .pl3-home{background:#201014;border-color:#d7192166}

/* sy08: one stable footer across every league level; quiet reward tiles. */
#device-host .pl3[data-design] .pl3-space{inset:0 0 226px!important}
#device-host .pl3[data-design] .pl3-controls{position:absolute;bottom:78px;left:16px;right:16px;height:70px;box-sizing:border-box;margin:0;padding:10px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;border:1px solid #ffffff1b;border-top:1px solid #ffffff0b;border-radius:0 0 16px 16px;background:#101215}
#device-host .pl3[data-design] .pl3-controls>div{width:auto;min-width:0;padding:0;background:none;border:0;border-radius:0;align-items:center;gap:4px}
#device-host .pl3[data-design] .pl3-controls span{font-size:11px;letter-spacing:.055em}
#device-host .pl3[data-design] .pl3-controls strong{font-size:17px;line-height:22px;white-space:nowrap}
#device-host .pl3[data-design] .pl3-arrow{width:44px;height:44px;border-radius:11px;background:#191c20;border-color:#ffffff13}
#device-host .pl3[data-design] .pl3-prize{position:absolute;bottom:148px;left:16px;right:16px;height:64px;min-height:0;box-sizing:border-box;margin:0;padding:10px 16px;display:flex;justify-content:flex-start;gap:12px;border:1px solid #ffffff1b;border-bottom:0;border-radius:16px 16px 0 0;background:#101215}
#device-host .pl3[data-design] .pl3-prize>span{min-width:0;gap:3px}
#device-host .pl3[data-design] .pl3-prize strong{font-size:13px;line-height:17px}
#device-host .pl3[data-design] .pl3-prize small{font-size:11px;line-height:15px}
#device-host .pl3[data-design] .pl3-foot{position:absolute;bottom:0;left:0;right:0;height:78px;box-sizing:border-box;padding:12px 16px 18px;background:#000}
#device-host .pl3[data-design] .pl3-home{position:absolute;top:auto!important;bottom:226px!important;left:50%!important;transform:translateX(-50%);margin:0;max-width:calc(100% - 32px);background:#0d0f12;border-color:#ffffff20}
#device-host .pl3-map-label[data-earned=true]{border:1px solid #ffffff18;border-radius:12px;padding:9px 12px;gap:6px;background:linear-gradient(130deg,#181b20,#0c0e12);box-shadow:0 5px 16px #0004}
#device-host .pl3-map-label[data-focused=true][data-earned=true]{min-width:112px;padding:11px 14px;border:1px solid #ffffff26;background:linear-gradient(130deg,#202329,#0d1014);box-shadow:inset 0 1px #ffffff0c,0 7px 20px #0005}
#device-host .pl3-map-label[data-focused=true]>small{font-size:11px;font-weight:400;line-height:15px;letter-spacing:0;color:#aeb5bf}
#device-host .pl3-map-label[data-focused=true] .pl3-map-prize>b{font-size:18px;line-height:22px}
#device-host .pl3-map-label[data-focused=true] .pl3-map-prize{gap:9px}
#device-host .pl3-map-label[data-focused=true] .pl3-map-prize>i{margin-left:auto;font-size:12px}
#device-host .pl3-space>canvas{mask-image:linear-gradient(transparent 0,transparent 64px,#000 116px,#000 75%,transparent 100%)}
@media(max-width:350px){#device-host .pl3[data-design] .pl3-controls strong{font-size:15px}#device-host .pl3-map-label[data-focused=true][data-earned=true]{min-width:104px;padding:9px 11px}#device-host .pl3-map-label[data-focused=true] .pl3-map-prize>b{font-size:16px}}

#device-host .pl3-map-label[data-compact=true][data-earned=true]{flex-direction:row;align-items:center;gap:8px;padding:6px 9px;border-radius:9px}
#device-host .pl3-map-label[data-compact=true] .pl3-level-word{display:none}
#device-host .pl3-map-label[data-compact=true]>small{font-size:10px;line-height:16px;color:#aeb5bf}
#device-host .pl3-map-label[data-compact=true] .pl3-map-prize{gap:5px}
#device-host .pl3-map-label[data-compact=true] .pl3-map-prize>.pdv-ico{width:14px;height:14px}
#device-host .pl3-map-label[data-compact=true] .pl3-map-prize>b{font-size:11px;line-height:16px}
#device-host .pl3-map-label[data-compact=true] .pl3-map-prize>i{font-size:10px}
#device-host .pl3-space>canvas{mask-image:linear-gradient(transparent 0,transparent 48px,#000 88px,#000 75%,transparent 100%)}
