/* PokerDot native studies. All compositions use the existing Play / card / button system. */
#device-host .pds-home:has(.plw) .rbh-sc{aspect-ratio:402/280}
#device-host .pds-home:has(.plw) .rbh-sc-art{width:44%!important;left:28%!important;top:4%!important}
#device-host .pds-home:has(.plw) .pdv-sr{top:200px;bottom:48px}
#device-host .pds-home:has(.plw) .pdv-stage-shield{top:198px}
#device-host .fr-hub .rbh>.plw{position:relative;display:flex;flex-direction:column;gap:var(--space-2,8px);margin:0 12px 12px;padding:12px 16px;border:0;border-radius:var(--radius-xl,20px);background:linear-gradient(180deg,#14161b,#0b0c0f);box-shadow:inset 0 0 0 1px #ffffff17,inset 0 1px 0 #ffffff1f,0 16px 32px -20px #000;overflow:hidden;font-family:var(--pd-font);color:var(--pd-ink);cursor:default}
#device-host .plw-main{height:100px;display:grid;grid-template-columns:84px 1fr;grid-template-rows:64px 28px;grid-template-areas:'art money' 'progress progress';gap:8px 12px;position:relative}
#device-host .plw-safe{grid-area:art;display:grid;place-items:center;position:relative;min-width:0;min-height:0;mix-blend-mode:screen}
#device-host .plw-safe>.pds-art{position:absolute;inset:0;width:100%;height:100%}
#device-host .plw .pds-art-halo,#device-host .plw-dial{display:none}
#device-host .plw-balance{grid-area:money;display:flex;flex-direction:column;justify-content:center;min-width:0}
#device-host .plw-balance>span{font:400 var(--pd-type-caption)/16px var(--pd-font);color:var(--pd-muted)}
#device-host .plw-balance>strong{font:700 var(--pd-type-metric)/36px var(--pd-font);font-variant-numeric:tabular-nums;white-space:nowrap}
#device-host .plw-balance small{font:400 var(--pd-type-label)/20px var(--pd-font);color:var(--pd-muted)}
#device-host .plw-progress{grid-area:progress;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
#device-host .plw-next{display:flex;justify-content:space-between;gap:8px;font:400 var(--pd-type-caption)/16px var(--pd-font);color:var(--pd-muted);white-space:nowrap}
#device-host .plw-next b{color:var(--pd-ink)}
#device-host .plw-next small{font-size:inherit;font-weight:400;color:var(--pd-muted)}
#device-host .plw-bar{display:block;height:6px;flex:none;border-radius:var(--radius-full);background:#ffffff14;overflow:hidden}
#device-host .plw-bar>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d71921,#ff6b73)}
#device-host .plw .plw-btn{height:48px;min-height:48px;margin:0;border-radius:var(--radius-md);font:700 var(--pd-type-label)/20px var(--pd-font);letter-spacing:.04em}
#device-host .plw-league{display:grid;grid-template-columns:52px 1fr 16px;grid-template-rows:36px 16px;grid-template-areas:'crest name arrow' 'crest boost arrow';align-content:center;gap:0 8px;min-height:76px;width:100%;padding:8px 0 0;border:0;border-top:1px solid #ffffff12;border-radius:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer;position:relative}
#device-host .plw-crest{grid-area:crest;align-self:center;display:grid;place-items:center;width:52px;height:52px}
#device-host .plw-name{grid-area:name;display:flex;flex-direction:column;min-width:0;justify-content:center}
#device-host .plw-name strong{font:700 var(--pd-type-label)/20px var(--pd-font);color:var(--ink)}
#device-host .plw-name small{font:400 var(--pd-type-caption)/16px var(--pd-font);color:var(--pd-red-ink)}
#device-host .plw-boost{grid-area:boost;font:400 var(--pd-type-caption)/16px var(--pd-font);color:var(--pd-muted);white-space:nowrap}
#device-host .plw-boost b{color:var(--pd-ink)}
#device-host .plw-chev{grid-area:arrow;align-self:center;font:400 24px/24px var(--pd-font);color:var(--pd-muted)}
#device-host .plw-league:hover{background:#ffffff04}
#device-host .plw button:focus-visible,#device-host .plr button:focus-visible{outline:2px solid var(--pd-ink);outline-offset:2px}
/* Ten distinct safe arrangements; second set pairs them with a split league footer. */
#device-host .plw[data-layout="2"] .plw-main{grid-template-columns:1fr 96px;grid-template-areas:'money art' 'progress progress'}
#device-host .plw[data-layout="2"] .plw-balance strong{font-size:var(--pd-type-feature);line-height:40px}
#device-host .plw[data-layout="3"] .plw-main{grid-template-columns:100px 1fr;grid-template-rows:54px 38px;grid-template-areas:'art money' 'art progress'}
#device-host .plw:is([data-layout="3"],[data-layout="4"]) .plw-next{flex-direction:column;gap:0}
#device-host .plw[data-layout="4"] .plw-main{grid-template-columns:1fr 104px;grid-template-rows:54px 38px;grid-template-areas:'money art' 'progress art'}
#device-host .plw[data-layout="4"] .plw-balance strong{font-size:var(--pd-type-feature);line-height:40px}
#device-host .plw[data-layout="5"] .plw-main{grid-template-columns:60px 1fr;grid-template-rows:56px 36px;gap:8px 16px}
#device-host .plw[data-layout="5"] .plw-balance{flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
#device-host .plw[data-layout="5"] .plw-balance>span{width:42px}
#device-host .plw[data-layout="6"] .plw-main{grid-template-columns:1fr 72px 1fr;grid-template-rows:64px 28px;grid-template-areas:'money art empty' 'progress progress'}
#device-host .plw[data-layout="6"] .plw-balance{grid-column:1/2}
#device-host .plw[data-layout="6"] .plw-safe{grid-column:3/4}
#device-host .plw[data-layout="6"] .plw-balance strong{font-size:var(--pd-type-feature);line-height:40px}
#device-host .plw[data-layout="7"] .plw-main{grid-template-columns:80px 1fr;grid-template-rows:56px 36px;grid-template-areas:'art money' 'progress progress'}
#device-host .plw[data-layout="7"] .plw-balance{text-align:right}
#device-host .plw[data-layout="7"] .plw-progress{padding:4px 8px;border-radius:var(--radius-sm);background:#ffffff05}
#device-host .plw[data-layout="8"] .plw-main{grid-template-columns:1fr 80px;grid-template-rows:56px 36px;grid-template-areas:'money art' 'progress progress'}
#device-host .plw[data-layout="8"] .plw-balance{flex-direction:row;align-items:center;justify-content:space-between;padding-right:8px}
#device-host .plw[data-layout="8"] .plw-balance>span{max-width:42px}
#device-host .plw[data-layout="8"] .plw-bar{height:8px;mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%)}
#device-host .plw[data-layout="9"] .plw-main{grid-template-columns:72px 1fr;grid-template-rows:60px 32px;grid-template-areas:'art money' 'progress progress'}
#device-host .plw[data-layout="9"] .plw-balance{align-items:center}
#device-host .plw[data-layout="9"] .plw-balance strong{font-size:var(--pd-type-feature);line-height:40px}
#device-host .plw[data-layout="9"] .plw-next{flex-direction:row-reverse}
#device-host .plw[data-layout="10"] .plw-main{grid-template-columns:112px 1fr;grid-template-rows:52px 40px;grid-template-areas:'art money' 'art progress'}
#device-host .plw[data-layout="10"] .plw-next{flex-direction:column;gap:0}
#device-host .plw[data-layout="10"] .plw-balance{align-items:flex-end}
#device-host .plw[data-layout="10"] .plw-progress{padding-left:8px;border-left:1px solid #ffffff12}
#device-host .plw[data-league=split] .plw-league{grid-template-columns:44px 1fr 104px 12px;grid-template-areas:'crest name boost arrow';grid-template-rows:56px;gap:0 8px}
#device-host .plw[data-league=split] .plw-crest{width:44px;transform:scale(.85);transform-origin:center}
#device-host .plw[data-league=split] .plw-name{align-self:center}
#device-host .plw[data-league=split] .plw-boost{align-self:center;white-space:normal;padding-left:8px;border-left:1px solid #ffffff12}
#device-host .plw[data-league=split] .plw-boost b{display:block;font-size:var(--pd-type-title);line-height:24px}
#device-host .plw[data-league=split] .plw-boost span{display:block;font-size:var(--pd-type-caption);line-height:16px}
/* Road: existing graphite cards, metallic chips, red earned progress. */
#device-host .plr{position:relative;isolation:isolate;font-family:var(--pd-font);color:var(--pd-ink);padding-bottom:8px;--road:24px;--wire:4px}
#device-host .plr-atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#050607}
#device-host .plr-hero{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:12px;margin:0;padding:12px;border-radius:var(--radius-xl);background:linear-gradient(180deg,#14161b,#0b0c0f);box-shadow:inset 0 0 0 1px #ffffff17,inset 0 1px 0 #ffffff1f,0 12px 24px #0009}
#device-host .plr-hero-crest{position:relative;display:grid;place-items:center;flex:none}
#device-host .plr-hero-crest>.pdc{width:64px!important;height:64px!important;--fs:24px!important}
#device-host .plr-rays{display:none}
#device-host .plr-hero-t{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
#device-host .plr-hero-t>strong{font:700 var(--pd-type-title)/24px var(--pd-font)}
#device-host .plr-hero-t>span{font:400 var(--pd-type-caption)/16px var(--pd-font);color:var(--pd-muted)}
#device-host .plr-hero-t>span>b{color:var(--pd-ink)}
#device-host .plr-hero-lv{display:flex;justify-content:space-between;gap:8px;margin-top:4px;white-space:nowrap}
#device-host .plr-hero-bar{display:block;height:6px;background:#ffffff14;border-radius:var(--radius-full);overflow:hidden}
#device-host .plr-hero-bar>i{display:block;height:100%;background:linear-gradient(90deg,#d71921,#ff6b73)}
#device-host .plr[data-header=side] .plr-hero{flex-direction:row-reverse}
#device-host .plr[data-header=side] .plr-hero-crest>.pdc{width:76px!important;height:76px!important}
#device-host .plr[data-header=center] .plr-hero{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:12px 20px}
#device-host .plr[data-header=center] .plr-hero-crest>.pdc{width:56px!important;height:56px!important;--fs:20px!important}
#device-host .plr[data-header=center] .plr-hero-t{display:grid;grid-template-columns:1fr;gap:4px;text-align:center}
#device-host .plr[data-header=compact] .plr-hero{padding:12px;gap:8px}
#device-host .plr[data-header=compact] .plr-hero-crest>.pdc{width:44px!important;height:44px!important;--fs:16px!important}
#device-host .plr[data-header=compact] .plr-hero-t>strong{font-size:var(--pd-type-body);line-height:20px}
#device-host .plr-map{position:relative;margin-top:12px}
#device-host .plr-zone{position:absolute;left:0;right:0;pointer-events:none;background:none}
#device-host .plr-texture{position:absolute;inset:0;pointer-events:none}
#device-host .plr-path{position:absolute;inset:0;width:100%;overflow:visible;pointer-events:none}
#device-host .plr-path path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
#device-host .plr-road-outer{stroke:#ffffff08;stroke-width:calc(var(--road) + 2px)}
#device-host .plr-road{stroke:#ffffff0c;stroke-width:var(--road)}
#device-host .plr-road-dash{stroke:#ffffff30;stroke-width:2px;stroke-dasharray:2 8}
#device-host .plr-road-done{stroke:#d71921;stroke-width:var(--wire);filter:drop-shadow(0 0 4px #d719214d)}
#device-host .plr-it{position:absolute;width:0;height:0;z-index:2}
#device-host .plr-dot,#device-host .plr-you,#device-host .plr-gate{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:grid;place-items:center}
#device-host .plr-dot{filter:drop-shadow(0 4px 6px #0009)}
#device-host .plr-you{width:80px;height:80px}
#device-host .plr-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#d71921 calc(var(--p)*360deg),#ffffff1a 0);mask:radial-gradient(closest-side,transparent 86%,#000 88%)}
#device-host .plr-tag{position:absolute;top:44px;left:0;transform:translateX(-50%);padding:4px 10px;border-radius:var(--radius-full);background:#d71921;font:700 var(--pd-type-caption)/16px var(--pd-font);white-space:nowrap}
#device-host .plr-side{position:absolute;top:0;transform:translateY(-50%)}
#device-host .plr-side[data-hide]{display:none}
#device-host .plr-it[data-side=r] .plr-side{left:44px}
#device-host .plr-it[data-side=l] .plr-side{right:44px}
#device-host .plr-connector{position:absolute;top:50%;height:1px;width:19px;background:#ffffff30}
#device-host .plr-it[data-side=r] .plr-connector{right:100%}
#device-host .plr-it[data-side=l] .plr-connector{left:100%}
#device-host .plr-it[data-s=now] .plr-connector{width:5px}
#device-host .plr-gift{display:flex;align-items:center;justify-content:center;position:relative;width:64px;height:64px}
#device-host .plr-gift>img{width:60px;height:60px;object-fit:contain}
#device-host .plr-gift>small{display:none;font:400 var(--pd-type-caption)/16px var(--pd-font);color:var(--pd-muted)}
#device-host .plr-rw{display:flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid #ffffff17;border-radius:var(--radius-full);padding:6px 8px;background:#0d0f12;min-height:32px}
#device-host .plr-rw .pdv-ico{width:20px;height:20px;flex:none}
#device-host .plr-rw-copy{display:flex;flex-direction:column;gap:2px}
#device-host .plr-rw-copy small{display:none;font:400 var(--pd-type-caption)/16px var(--pd-font);color:var(--pd-muted)}
#device-host .plr-rw-copy em{font:700 var(--pd-type-label)/20px var(--pd-font);font-style:normal}
#device-host .plr-ok{font-style:normal;font-size:var(--pd-type-caption);color:var(--pd-green);font-weight:700}
#device-host .plr-it[data-side=b] .plr-side{top:42px;left:0;right:auto;transform:translateX(-50%)}
#device-host .plr-it[data-side=b] .plr-connector{left:50%;top:-17px;width:1px;height:17px}
#device-host .plr[data-reward=card] .plr-rw{border-radius:var(--radius-md);padding:8px;min-height:52px;background:linear-gradient(180deg,#14161b,#0b0c0f)}
#device-host .plr[data-reward=card] .plr-rw-copy small{display:block}
#device-host .plr[data-reward=card] .plr-gift{border:1px solid #ffffff17;border-radius:var(--radius-md);background:#ffffff04;width:76px;height:80px;flex-direction:column}
#device-host .plr[data-reward=card] .plr-gift small{display:block}
#device-host .plr[data-reward=card] .plr-gift img{width:52px;height:52px}
#device-host .plr[data-reward=large] .plr-rw{border:0;background:none;padding:4px 6px}
#device-host .plr[data-reward=large] .plr-rw-copy em{font-size:var(--pd-type-title);line-height:24px}
#device-host .plr[data-reward=large] .plr-rw-copy small{display:block}
#device-host .plr-it[data-g] .plr-side{left:0;right:auto;top:56px;transform:translateX(-50%)}
#device-host .plr-gatecard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px;border:1px solid #ffffff24;border-radius:var(--radius-lg);background:linear-gradient(180deg,#14161b,#0b0c0f);min-width:232px;box-shadow:inset 0 1px 0 #ffffff12}
#device-host .plr-gatecard>b{font:700 var(--pd-type-body)/20px var(--pd-font)}
#device-host .plr-gatecard>span{font:400 var(--pd-type-caption)/16px var(--pd-font);color:var(--pd-muted);white-space:nowrap}
#device-host .plr-gatecard em{font-style:normal;color:var(--pd-ink);font-weight:700}
#device-host .plr-gc-frame,#device-host .plr-gate-prize{display:flex;align-items:center;gap:8px;min-height:26px}
#device-host .plr-gate-prize img{width:32px;height:32px;object-fit:contain}
#device-host .plr-gate-prize .pdv-ico{width:20px;height:20px}
#device-host .plr-gate-avatar{position:absolute;left:calc(50% + 88px);top:0}
#device-host .plr-it[data-g][data-s=now] .plr-tag{left:88px;top:8px}
#device-host .plr-foot{position:sticky;bottom:0;z-index:9;padding:16px 0 8px;background:linear-gradient(0deg,#050607 70%,transparent)}
#device-host .plr-rates{width:100%;height:48px;min-height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;gap:12px;font:700 var(--pd-type-label)/20px var(--pd-font)}
/* Backgrounds are existing brand materials: black, dot light, graphite and red edge light. */
#device-host .plr[data-bg=dots] .plr-atmosphere{background:radial-gradient(#ffffff10 1px,transparent 1.4px) 50% 0/8px 8px,#050607}
#device-host .plr[data-bg=lamp] .plr-atmosphere{background:radial-gradient(ellipse at 50% 20%,#ffffff0d,transparent 65%),#050607}
#device-host .plr[data-bg=lamp] .plr-texture{background:radial-gradient(#ffffff12 1px,transparent 1.5px) 50% 0/6px 6px;mask:linear-gradient(90deg,transparent,#000 45%,#000 55%,transparent)}
#device-host .plr[data-bg=edge] .plr-atmosphere{background:linear-gradient(90deg,#d7192112,transparent 24% 76%,#d7192112),#050607}
#device-host .plr[data-bg=chapters] .plr-zone{border:1px solid #ffffff0f;border-radius:var(--radius-xl);background:linear-gradient(180deg,#14161b80,#0b0c0f80)}
#device-host .plr[data-ls="2"]{--road:6px;--wire:3px}
#device-host .plr[data-ls="3"]{--road:16px;--wire:4px}
#device-host .plr[data-ls="4"]{--road:36px;--wire:4px}
#device-host .plr[data-ls="5"]{--road:8px;--wire:3px}
#device-host .plr[data-ls="6"]{--road:28px;--wire:5px}
#device-host .plr[data-ls="7"]{--road:2px;--wire:2px}
#device-host .plr[data-ls="8"]{--road:32px;--wire:3px}
#device-host .plr[data-ls="9"]{--road:12px;--wire:4px}
#device-host .plr[data-ls="10"]{--road:20px;--wire:4px}
#device-host .plr[data-ls="11"]{--road:40px;--wire:4px}
#device-host .plr[data-ls="12"]{--road:18px;--wire:5px}
#device-host .plr[data-ls="13"]{--road:4px;--wire:3px}
#device-host .plr[data-ls="14"]{--road:26px;--wire:4px}
#device-host .plr[data-ls="15"]{--road:10px;--wire:3px}
#device-host .plr[data-ls="16"]{--road:30px;--wire:4px}
#device-host .plr[data-ls="17"]{--road:34px;--wire:4px}
#device-host .plr[data-ls="18"]{--road:14px;--wire:4px}
#device-host .plr[data-ls="19"]{--road:22px;--wire:4px}
#device-host .plr[data-ls="20"]{--road:3px;--wire:3px}
#device-host .plr:is([data-ls="2"],[data-ls="7"],[data-ls="13"],[data-ls="20"]) .plr-road-dash{display:none}
@media(max-width:360px){#device-host .plw[data-league=split] .plw-league{grid-template-columns:40px 1fr 90px 8px;gap:0 4px}#device-host .plw-boost{white-space:normal}#device-host .plr-hero{gap:8px;padding:12px 8px}#device-host .plr-hero-crest>.pdc{width:48px!important;height:48px!important}#device-host .plr-hero-lv{flex-wrap:wrap;gap:0 8px}}
@media(prefers-reduced-motion:reduce){#device-host .plr *,#device-host .plw *{animation:none!important;transition:none!important}}
/* Review correction: rhythm between the progress, CTA and league; optical safe alignment. */
#device-host .fr-hub .rbh>.plw{gap:var(--space-4);padding:var(--space-4) var(--space-5)}
#device-host .plw-main{height:108px;grid-template-rows:72px 28px}
#device-host .plw-safe>.pds-art{width:100%;height:100px;top:50%;bottom:auto;transform:translateY(-30%);overflow:visible}
#device-host .plw-safe>.pds-art>img{object-fit:contain;object-position:center}
#device-host .plw[data-layout="5"] .plw-main{grid-template-columns:80px 1fr}
#device-host .plw[data-layout="9"] .plw-main{grid-template-columns:88px 1fr}
#device-host .plw-league{min-height:72px;padding-top:8px}
#device-host .plw:is([data-layout="5"],[data-layout="8"]) .plw-balance>span{width:auto;max-width:none;white-space:nowrap}
#device-host .plr-hero::before{content:'';position:absolute;left:-16px;right:-16px;top:-20px;height:20px;background:#050607;pointer-events:none}
#device-host .plr-foot::after{content:'';position:absolute;left:-16px;right:-16px;top:100%;height:24px;background:#050607;pointer-events:none}
@media(max-width:360px){#device-host .plw:is([data-layout="5"],[data-layout="8"]) .plw-balance{flex-direction:column;align-items:flex-start;justify-content:center}}
#device-host .plw-safe{overflow:hidden}
#device-host .plw-safe{overflow:visible}
#device-host .plw-safe>.pds-art>img{mask-image:linear-gradient(#000 0 60%,transparent 86%)}

/* Explicit remaining XP, using the existing single progress bar. */
#device-host .plw .plw-next{font-size:13px;line-height:18px;white-space:normal;align-items:center}
#device-host .plw .plw-next b{white-space:nowrap;color:#f2f3f5}
#device-host .plw .plw-bar{height:7px}

/* League identity above a complete, readable talisman bonus. */
#device-host .plw[data-league=split] .plw-league{grid-template-columns:44px minmax(0,1fr) 16px;grid-template-rows:auto auto;grid-template-areas:'crest name arrow' 'boost boost boost';gap:12px 10px;padding-top:12px}
#device-host .plw[data-league=split] .plw-boost{display:flex;align-items:center;gap:16px;padding:12px 0 0;border-left:0;border-top:1px solid var(--pd-line);white-space:normal}
#device-host .plw[data-league=split] .plw-boost b{flex:none;font:700 var(--pd-type-submetric)/32px var(--pd-font);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
#device-host .plw[data-league=split] .plw-boost span{max-width:230px;font:400 var(--pd-type-label)/20px var(--pd-font);text-wrap:balance}