/* App-mode only (html.pl-app). Nothing here applies to the normal website. */
html.pl-app{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--tabh:54px;background:#000}
html.pl-app body{padding-bottom:calc(var(--tabh) + var(--sab) + 8px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
html.pl-app header{position:sticky;top:0;z-index:20;padding-top:var(--sat);background:#000!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.pl-app header .nav{height:50px;min-height:0}
html.pl-app header .btn.sm,html.pl-app header .nav-tag,html.pl-app header .tag{display:none!important}
html.pl-app [data-web-only],html.pl-app footer,html.pl-app .foot,html.pl-app .hero,html.pl-app #plan,html.pl-app .price,html.pl-app .ot,html.pl-app a.back{display:none!important}
html.pl-app section.intro{padding-top:10px!important;padding-bottom:4px!important}
html.pl-app section.intro .lede,html.pl-app section.intro .eyebrow{display:none}
html.pl-app section.intro h1{font-size:26px;margin:4px 0 8px}
.pl-tabs{display:none}
html.pl-app .pl-tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--tabh) + var(--sab));padding:0 env(safe-area-inset-right,0px) var(--sab) env(safe-area-inset-left,0px);background:rgba(0,0,0,.94);border-top:1px solid rgba(201,184,150,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html.pl-app .pl-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#8E8E96;text-decoration:none;font:500 9.5px/1 Jost,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase}
html.pl-app .pl-tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html.pl-app .pl-tabs a.on{color:#C9B896}
html.pl-app .pl-tabs a.on svg{stroke:#C9B896;filter:drop-shadow(0 0 6px rgba(201,184,150,.35))}
html.pl-app .pl-tabs a:active{color:#D9D9DE}
html.pl-app .pl-hk{background:transparent;color:#E8D9B5;border:1px solid rgba(201,184,150,.55)}
html.pl-app .unlock-toast{bottom:calc(var(--tabh) + var(--sab) + 10px)}
html.pl-app a.row[href="/#plan"]{pointer-events:none}html.pl-app a.row[href="/#plan"] .st{display:none}
html.pl-app .pl-mini{position:fixed;left:50%;bottom:calc(var(--tabh) + var(--sab) + 14px);z-index:60;transform:translate(-50%,8px);opacity:0;transition:opacity .3s,transform .3s;padding:7px 14px;border-radius:999px;background:rgba(10,10,11,.92);border:1px solid rgba(201,184,150,.45);color:#E8D9B5;font:500 10px/1 Jost,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;pointer-events:none}html.pl-app .pl-mini.on{opacity:1;transform:translate(-50%,0)}
/* bigger, clearer tab bar */
html.pl-app{--tabh:64px}
html.pl-app .pl-tabs{background:rgba(14,14,16,.78);backdrop-filter:saturate(160%) blur(20px);-webkit-backdrop-filter:saturate(160%) blur(20px);border-top:1px solid rgba(217,217,222,.12);box-shadow:0 -8px 24px rgba(0,0,0,.35)}
html.pl-app .pl-tabs a{position:relative;gap:4px;color:#B9B9C2;font:600 11px/1 Jost,system-ui,sans-serif;letter-spacing:.06em;text-transform:none}
html.pl-app .pl-tabs svg{width:26px;height:26px;stroke-width:1.6;position:relative;z-index:1}
html.pl-app .pl-tabs span{position:relative;z-index:1}
html.pl-app .pl-tabs a.on{color:#D6C6A3}
html.pl-app .pl-tabs a.on::before{content:"";position:absolute;top:7px;bottom:7px;left:50%;width:min(76px,82%);transform:translateX(-50%);border-radius:16px;background:radial-gradient(120% 100% at 50% 40%,rgba(201,184,150,.22),rgba(201,184,150,.08) 70%);box-shadow:0 0 18px rgba(201,184,150,.22),inset 0 0 0 1px rgba(201,184,150,.25)}
html.pl-app .pl-tabs a.on svg{stroke:#D6C6A3;filter:drop-shadow(0 0 6px rgba(201,184,150,.45))}
html.pl-app .pl-tabs a:active{color:#EDEDF0}
/* floating dock (pl-dock) */
html.pl-app{--tabh:64px;--dockgap:10px;background:#0A0A0B}
html.pl-app body{background:#0A0A0B;padding-bottom:calc(var(--tabh) + var(--sab) + var(--dockgap) + 20px)}
html.pl-app .pl-tabs.pl-dock{left:calc(12px + env(safe-area-inset-left,0px));right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(var(--sab) + var(--dockgap));height:var(--tabh);padding:0 6px;border-radius:24px;border:1px solid rgba(201,184,150,.35);border-top:1px solid rgba(201,184,150,.45);background:linear-gradient(180deg,rgba(30,30,32,.82),rgba(20,20,22,.86));backdrop-filter:saturate(170%) blur(22px);-webkit-backdrop-filter:saturate(170%) blur(22px);box-shadow:0 12px 32px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);view-transition-name:pl-dock;isolation:isolate}
html.pl-app .pl-dock a{color:rgba(255,255,255,.72);font:500 11px/1 Jost,system-ui,sans-serif;letter-spacing:.05em;gap:4px;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
html.pl-app .pl-dock a.on::before{display:none}
html.pl-app .pl-dock svg{width:25px;height:25px;filter:none}
html.pl-app .pl-dock svg.fi{display:none;fill:currentColor;stroke:none}
html.pl-app .pl-dock svg.fi .k{fill:none;stroke:#1a1813;stroke-width:1.4}
html.pl-app .pl-dock a.on svg.o{display:none}html.pl-app .pl-dock a.on svg.fi{display:block;filter:drop-shadow(0 0 6px rgba(201,184,150,.35))}
html.pl-app .pl-dock a.on{color:#E2CFA4}
html.pl-app .pl-dock a:active{color:#fff}
html.pl-app .pl-pill{position:absolute;z-index:0;top:7px;bottom:7px;left:6px;width:calc((100% - 12px) / 4);border-radius:18px;pointer-events:none;transition:transform .26s cubic-bezier(.3,1.3,.5,1),opacity .2s;view-transition-name:pl-pill}
html.pl-app .pl-pill::after{content:"";position:absolute;inset:0 8px;border-radius:18px;background:linear-gradient(180deg,rgba(212,192,150,.30),rgba(201,184,150,.16));box-shadow:inset 0 0 0 1px rgba(214,196,156,.5),0 0 16px rgba(201,184,150,.22)}
html.pl-app .pl-dock a.bump svg{animation:plBump .28s ease-out}
@keyframes plBump{0%{transform:scale(1)}40%{transform:scale(.84)}75%{transform:scale(1.1)}100%{transform:scale(1)}}
html.pl-app header{view-transition-name:pl-head}
html.pl-app .unlock-toast{bottom:calc(var(--tabh) + var(--sab) + var(--dockgap) + 12px)}
html.pl-app .pl-mini{bottom:calc(var(--tabh) + var(--sab) + var(--dockgap) + 16px)}
/* page transitions: view transitions where supported (short crossfade + slight slide), else fade */
@view-transition{navigation:auto}
::view-transition-old(root){animation:plVtOut .14s ease-in both}
::view-transition-new(root){animation:plVtIn .14s ease-out both}
::view-transition-group(pl-pill){animation-duration:.22s;animation-timing-function:cubic-bezier(.3,1.2,.5,1)}
::view-transition-old(pl-dock),::view-transition-new(pl-dock),::view-transition-old(pl-head),::view-transition-new(pl-head){animation:none;mix-blend-mode:normal}
::view-transition-old(pl-dock){display:none}::view-transition-old(pl-head){display:none}
@keyframes plVtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes plVtIn{from{opacity:0;transform:translateY(6px)}}
html.pl-app:not(.pl-vt) body>*:not(header):not(.pl-tabs):not(.pl-mini){animation:plFadeIn .14s ease-out both}
html.pl-app.pl-leave body>*:not(header):not(.pl-tabs){opacity:0;transition:opacity .1s ease-in}
@keyframes plFadeIn{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html.pl-app .pl-pill{transition:none}html.pl-app .pl-dock a.bump svg{animation:none}
  html.pl-app:not(.pl-vt) body>*{animation:none!important}html.pl-app.pl-leave body>*{opacity:1!important}
}
/* dock lower + slimmer: sits just above the home indicator instead of stacking the full inset + margin */
html.pl-app{--tabh:60px;--dockb:max(6px,calc(var(--sab) - 20px))}
html.pl-app .pl-tabs.pl-dock{bottom:var(--dockb)}
html.pl-app .pl-pill{top:6px;bottom:6px}
html.pl-app body{padding-bottom:calc(var(--tabh) + var(--dockb) + 16px)}
html.pl-app .unlock-toast{bottom:calc(var(--tabh) + var(--dockb) + 10px)}
html.pl-app .pl-mini{bottom:calc(var(--tabh) + var(--dockb) + 14px)}
html.pl-app{--dockb:max(4px,calc(var(--sab) - 30px))}
html.pl-app .pl-tabs.pl-dock{z-index:2147483000;pointer-events:auto;touch-action:manipulation}html.pl-app .pl-dock *{pointer-events:auto}html.pl-app .pl-pill{pointer-events:none}
/* first-frame dock: active tab + pill from html[data-tab] (no JS needed), solid while view transitions snapshot it */
html.pl-app[data-tab=home] .pl-dock a[data-t=home],html.pl-app[data-tab=avatar] .pl-dock a[data-t=avatar],html.pl-app[data-tab=groups] .pl-dock a[data-t=groups],html.pl-app[data-tab=global] .pl-dock a[data-t=global]{color:#E2CFA4}
html.pl-app[data-tab=home] .pl-dock a[data-t=home] svg.o,html.pl-app[data-tab=avatar] .pl-dock a[data-t=avatar] svg.o,html.pl-app[data-tab=groups] .pl-dock a[data-t=groups] svg.o,html.pl-app[data-tab=global] .pl-dock a[data-t=global] svg.o{display:none}
html.pl-app[data-tab=home] .pl-dock a[data-t=home] svg.fi,html.pl-app[data-tab=avatar] .pl-dock a[data-t=avatar] svg.fi,html.pl-app[data-tab=groups] .pl-dock a[data-t=groups] svg.fi,html.pl-app[data-tab=global] .pl-dock a[data-t=global] svg.fi{display:block}
html.pl-app[data-tab=avatar] .pl-pill{transform:translateX(100%)}html.pl-app[data-tab=groups] .pl-pill{transform:translateX(200%)}html.pl-app[data-tab=global] .pl-pill{transform:translateX(300%)}
html.pl-app:not([data-tab]) .pl-pill{opacity:0}
html.pl-app:active-view-transition .pl-dock,html.pl-app.pl-leave .pl-dock{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#18181b!important}
::view-transition-new(pl-dock){animation:none;opacity:1}
html.pl-app{--dockb:max(10px,calc(var(--sab) + 2px))}

/* native iOS tab bar builds (UA NativeTabs): no web dock, no dock padding */
html.pl-app.pl-native{--tabh:0px;--dockgap:0px;--dockb:0px;--sab:0px}html.pl-app.pl-native body .pl-tabs.pl-dock,html.pl-app.pl-native body nav.pl-tabs{display:none!important}

/* sheets: last rows clear the dock (web) / tab bar (native build: vars are 0, webview ends above the bar) */
html.pl-app #tp-edit.nsheet{padding-bottom:calc(var(--tabh) + var(--dockb) + env(safe-area-inset-bottom) + 16px)!important;scroll-padding-bottom:calc(var(--tabh) + var(--dockb) + 16px)}html.pl-app .gsh-c{padding-bottom:calc(var(--tabh) + var(--dockb) + env(safe-area-inset-bottom) + 16px)!important}
html.pl-app.pl-native #tp-edit.nsheet,html.pl-app.pl-native .gsh-c{padding-bottom:calc(env(safe-area-inset-bottom) + 16px)!important}
/* preview: App Home 'New & updated' swipe row (app/whatsnew.js) */
html.pl-app .pl-new{grid-column:1/-1;margin:0;padding:0;min-width:0}
@media(max-width:859px){html.pl-app #walker .pl-new{order:-1}}
.pl-new .pn-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 8px}
.pl-new .pn-h h3{margin:0;font-family:var(--sans,Jost,sans-serif);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--champ,#C9B896)}
.pl-new .pn-sub{font-size:11px;letter-spacing:.08em;color:#8E8E96}
.pl-new .pn-row{list-style:none;margin:0 -16px;padding:2px 16px 6px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pl-new .pn-row::-webkit-scrollbar{display:none}
.pl-new .pn-row>li{flex:0 0 auto;scroll-snap-align:start}
.pl-new .pn-card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;width:132px;padding:8px 8px 10px;border-radius:16px;background:linear-gradient(160deg,#1A1A1D,#0C0C0E);border:1px solid rgba(255,255,255,.09);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,border-color .15s ease}
.pl-new .pn-card:active{transform:scale(.97)}.pl-new .pn-card:focus-visible{outline:2px solid var(--champ,#C9B896);outline-offset:2px}
.pl-new .pn-card.on{border-color:rgba(201,184,150,.38)}
.pl-new .pn-img{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:11px;overflow:hidden;background:#0A0A0B;border:1px solid rgba(255,255,255,.06)}
.pl-new .pn-img img{width:100%;height:100%;object-fit:cover;display:block}
.pl-new .pn-tag{position:absolute;left:6px;top:6px;font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:3px 7px;border-radius:99px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pl-new .pn-new{background:rgba(201,184,150,.92);color:#141416}
.pl-new .pn-updated{background:rgba(20,20,22,.78);color:#E4E4E8;border:1px solid rgba(220,220,228,.45)}
.pl-new .pn-n{font-size:13px;font-weight:500;line-height:1.25;color:#F1F1F3;letter-spacing:.01em;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pl-new .pn-s{display:flex;align-items:center;gap:4px;font-size:10.5px;letter-spacing:.04em;color:#9C9CA4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-new .pn-card.on .pn-s{color:var(--champ,#C9B896)}
.pl-new .pn-s svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:600px){.pl-new .pn-card{width:150px}.pl-new .pn-row{gap:12px}}
@media(min-width:860px){.pl-new .pn-row{margin:0;padding:2px 0 6px}}

/* preview (Aaron 16:59): 'Fresh Drops' heading + static drop buddy right after 'Drops', cap-height sized, vertically centred */
.pl-new .pn-h h3{display:inline-flex;align-items:center;white-space:nowrap}.pl-new .pn-h h3 .pn-db{width:auto;height:1.3em;margin-left:.45em;flex:none;display:block;overflow:visible;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5));transform:translateY(-.06em)}

/* Aaron approved 18:35: rarity tag on Fresh Drops cards, same tier colours as the Unlockables tags (Rare = champagne) */
.pl-new .pn-img{position:relative}.pl-new .pn-tr{position:absolute;right:6px;bottom:6px;font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:2px 6px;border-radius:99px;border:1px solid;background:rgba(10,10,11,.78);line-height:1.3}.pn-t-common{color:#B4B4BC;border-color:rgba(180,180,188,.5)}.pn-t-uncommon{color:#86B7CC;border-color:rgba(134,183,204,.6)}.pn-t-rare{color:#D9C9A6;border-color:rgba(201,184,150,.7);box-shadow:0 0 8px rgba(201,184,150,.3)}.pn-t-legendary{color:#E9C45E;border-color:#E9C45E;box-shadow:0 0 10px rgba(233,196,94,.4)}

/* PROD (Aaron approved 23:27; from 22:44): header tab picture before the PL logo (app only) */
.pl-htab{display:none}
html.pl-app header .pl-htab{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;margin-right:-1px;color:#D6C6A3}
html.pl-app header .pl-htab svg{display:none;width:22px;height:22px;fill:currentColor;stroke:none;filter:drop-shadow(0 0 5px rgba(201,184,150,.35))}
html.pl-app header .pl-htab svg .k{fill:none;stroke:#1a1813;stroke-width:1.4}
html.pl-app header .pl-htab svg.ol{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html.pl-app[data-tab=home] header .pl-htab svg[data-t=home],html.pl-app[data-tab=avatar] header .pl-htab svg[data-t=avatar],html.pl-app[data-tab=groups] header .pl-htab svg[data-t=groups],html.pl-app[data-tab=global] header .pl-htab svg[data-t=global]{display:block}
html.pl-app:not([data-tab]) header .pl-htab{display:none}
html.pl-app header .pl-htab svg>*{color:#D6C6A3;font-size:inherit;letter-spacing:normal}
/* app only: no double-tap-to-zoom (the avatar canvas keeps its own inline touch-action for pinch/rotate) */html.pl-app,html.pl-app body,html.pl-app button,html.pl-app a,html.pl-app [role=button],html.pl-app [role=tab],html.pl-app label,html.pl-app input,html.pl-app select,html.pl-app textarea,html.pl-app summary{touch-action:manipulation}
/* header logo size even (Aaron, Oct 19): every page (site + app, incl. the gate page) uses the Avatar page (/card/) header metrics: wordmark 20px tall, 20px side padding, 60px bar (app keeps its 50px bar), 14px gap */header>.wrap.nav{padding-left:20px;padding-right:20px;height:60px;gap:14px}header .brand img:not(.pl-mono){height:20px;width:auto}
/* Aaron approved Oct 19: website header shows the page's tab picture (Home / Avatar / Global / Groups) in place of the PL monogram, same look as the app header icon, sized to the monogram's box so the wordmark doesn't move; app mode keeps its own .pl-htab */.pl-wtab{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32.4px;height:28px;margin:-3px 0;color:#D6C6A3}.pl-wtab svg{display:block;width:25px;height:25px;fill:currentColor;stroke:none;filter:drop-shadow(0 0 6px rgba(201,184,150,.35))}.pl-wtab svg .k{fill:none;stroke:#1a1813;stroke-width:1.4}@media (min-width:720px){.pl-wtab{width:34.7px;height:30px;margin:-4px 0}.pl-wtab svg{width:27px;height:27px}}html.pl-app .pl-wtab{display:none!important}