/* @textures:start */
:root {
    --tex-grass: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVR42n2SMWvbQBTHf5aCiUV8nK3Bm3UOCGkplA4eQqFLIXs/RvId8mHyCQSdOnbJ0CEZulgYXFlD4SiqxSXYwRDcJXeRhOlb7o7/+9/7v/d/vauvHw8A8WzK8lfJeCT4uzGMR4JuhFK6e1XXAJyMR4JypVlSEs+mPNznLulps2N6PiGUkof7nPCDbOFnowFeudKozOdps6Oqa1TmM7x9IZ5NUZlPudIAqMynqmuGty+ozHccT2U+ldm3kgFX6XJx7u7lShOKPgBJGqEyn97Nl/nBkpI0Qv/+Q222rd4rsycUfXc2w2s+8sWa2myRIqDQ5m14oo8UgTuTNHLYSbfS4+4ZBahJ24XabKnM/vW+Pq4gFP0WsdDGkSxuC1nc40hIEQAwHJy63u2MrEpeVbY+sBWt3It5DOAITRWuhcrsXUU1ES7hcfdMvlgjRYCaCJI04u7HkiSNuPz0zrXSu/78/tD99ZiFXaV2Vp4FC20otHFqrFXNwVl8ODh1NnuWTMe6fLFuVb2Yxw5vuuVZOV3fm4sE8O37T6QI3ICTNKLQpr3K/+vb2mvX3Fr7D/BM2vhITtvPAAAAAElFTkSuQmCC);
    --tex-dirt: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABK0lEQVR42oWTsWrEMAyG/5oQWkOFIYNvuMFw3H5TH6QP1GfsXg483NAMgaBAEry0wyGf7FyvXmJb+qVPUvz08f72AwCxZwRPGDihoxYAiv29NXCCkUPwBAAbQex5s3dk4ciioxbNo+gdtZiWFZrQkcXIc/Yz4lyLNdnAKRNqsSN7Jaix9dmR3dA5sjhfRsSe0Ui2w97hfBmz07SsCJ6KjAOn672yN5Jt5Plhx4VMfKQk48jmmmPPGfm/YMUYtbMg6/H9taZlhdE1Cla9r4MJ8em4g7mXaeCURXqEMgHdt0aMIgiecNg7jDxvRhh7Rqh+tPwrn447vL48F32QryCLXcSx51sAPUbJLEK576gtSgiebgEEceCUM+tXKfbPr+/iztRdrUU6UPC0ebW/DfuxWxF6OVUAAAAASUVORK5CYII=);
    --tex-night: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABMklEQVR42nVT0W7DIAy8EWKaCqo+dL8x7f+/qQ9VQaUQou0hs+Ow1lIUEnz2+Wx/fH1+/9DowFbngldGo0OdC9pScPYX3NIVdnAwAECWQJZ24LYUcGAGA4AdHFKOsMN6Z/wUkHJEyhFt2QKc/UVA/PZTAI0ObSnia27pKlmOh5MESDkKk/6fHRzssAYyTKXORTJpEN/7KYgfn4+H058GSkQN0sbZAYBZ17msAd4prwXtEzAL0zvR6OTRAP1N49oJP4UtgNbi8bz/06POW1v5LuW4adALxxS1Hn2pbSnbIGlHno13E6kTGa0wZ0057hz9FHalaDO6Tg3kftPoUFt92VoAMG0pUrOfgiwMANRWZUeYnWYKAJYj65q5bXo6mR1Zkk0EANsLRJYk+6t1fjzvu3J+ARt9vq4f4eXrAAAAAElFTkSuQmCC);
    --tex-planks: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA2ElEQVR42qVTuw7CMAy8OsVZAAkxICT4BD6AhY9g5fM7dOwAS43aMlSuEpOgSJwUVYkf8t251eNynzwxAKAfBQDQdC3OuyMUMgjYMSxkEJAWanEK7Bie5gNg+QKYG5SgHwXP9yualB2jbro2WZB7t6hLueq71YdSXHPFNuaJQZ4YMkjEVe+eGJvVeompBmFudTtdJ/yB+rDdgx1/cQvHtBYrLU8MyokWjhk2U61+7kGqqW2m92gPSr3P7kGKr/Xe5kQU1CbVINQiZeXyM1nuOQ1SsbqUdy7vAyHMd5QVRrU9AAAAAElFTkSuQmCC);
    --tex-stars: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAdElEQVR42u3ZsRGAIBAEQPqvjBZMNSIjcszOBgwdZ/B3O/gX8DlaA76WJCUL37eihQPgfw0AAO3v4crbI7SR/Kkp41qjKaPPul9v9JmcR8o3wYYFW9AhbAV4S0S0DwAAoma3SEUvuiplbDI2Dx2AIQQAWN8NKUds5fkEvW4AAAAASUVORK5CYII=);
}
/* @textures:end */

/* PixieSMP store, pixel edition: a fairy garden at night, built like a Minecraft GUI.
   Palette from webstore/STORE_SPEC.md; pixel art from paynow-theme-tools/gen_art.py and the PixieSMP pack. */

:root {
    --lime: #A6E22E; --lime-l: #D4F57A; --lime-d: #5E9A12;
    --pink: #F28AD8; --pink-l: #FFC2EE; --pink-d: #A84A96;
    --gold: #FFD24A; --gold-l: #FFF0A8; --gold-d: #C98A1A;
    --lilac: #B48CFF; --peach: #FFC48F; --cream: #FFF6E3;
    --bg: #1C0C22; --panel: #2A1330; --panel-2: #34183B; --slot: #160919;
    --line: #10050E; --text: #FFF6E3; --muted: #D2B9D2; --dim: #9A7E9B;
    --s: 4px;                                   /* one art pixel */
    --px-font: 'Pixelify Sans', 'Nunito', system-ui, sans-serif;
    --body-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%2310050E' d='M1 0h4v1H1zM0 1h1v4H0zM5 1h1v4H5zM1 5h4v1H1z'/%3E%3Cpath fill='%23F28AD8' d='M1 1h4v1H1zM1 2h1v2H1z'/%3E%3Cpath fill='%23A84A96' d='M4 2h1v3H4zM1 4h3v1H1z'/%3E%3C/svg%3E");
    --frame-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%2310050E' d='M1 0h4v1H1zM0 1h1v4H0zM5 1h1v4H5zM1 5h4v1H1z'/%3E%3Cpath fill='%23FFE27A' d='M1 1h4v1H1zM1 2h1v2H1z'/%3E%3Cpath fill='%23C98A1A' d='M4 2h1v3H4zM1 4h3v1H1z'/%3E%3C/svg%3E");
    --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%2310050E' d='M5 1h1v1H5zM4 2h1v1H4zM1 3h1v1H1zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E");

    /* Summit variables, still used by the basket drawer, cart and account pages */
    --primary-color: var(--lime); --secondary-color: var(--pink);
    --background-color: var(--bg); --content-color: var(--panel); --content-light-color: var(--panel-2);
    --text-muted: var(--muted); --content-width: 1240px;
}

/* ---------------- base ---------------- */
html { scroll-behavior: smooth; }
body.pn {
    margin: 0; color: var(--text); font: 600 16px/1.55 var(--body-font);
    background-color: var(--bg);
    background-image: linear-gradient(180deg, rgba(36, 14, 44, .55), rgba(16, 6, 18, .9)), var(--tex-night);
    background-size: auto, 64px 64px;
    image-rendering: auto;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[x-cloak] { display: none !important; }
.pn a { color: inherit; }
.pn img { max-width: 100%; }
.pn h1, .pn h2, .pn h3, .pn h4 { margin: 0; line-height: 1.15; }
.pn button { font: inherit; cursor: pointer; }
.pn ::selection { background: var(--pink); color: var(--line); }
.pn-px { display: block; width: 100%; height: auto; overflow: visible; }
.pn-ico { width: calc(var(--w) * 3px); height: calc(var(--h) * 3px); flex-shrink: 0; }

.pn-app { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.pn-content { flex: 1; position: relative; z-index: 2; padding: 28px 0 56px; }
.pn-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/* ---------------- building blocks ---------------- */
.px-box {
    position: relative; box-sizing: border-box;
    border: 6px solid transparent; border-image: var(--frame) 2 / 6px / 0 stretch;
    background: var(--panel) padding-box;
    background-clip: padding-box;
}
.px-title {
    font: 600 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--px-font); letter-spacing: .02em; color: var(--text);
    text-shadow: 3px 3px 0 var(--line);
}
.px-title span { color: var(--pink); }
.px-title--center { text-align: center; }
.px-link { font: 500 1rem var(--px-font); color: var(--lime); text-decoration: none; }
.px-link:hover { color: var(--lime-l); text-decoration: underline; text-underline-offset: 4px; }

.px-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
    padding: 9px 16px 11px; border: 3px solid var(--line); border-radius: 0;
    font: 500 1.05rem/1 var(--px-font); letter-spacing: .03em; text-decoration: none; white-space: nowrap;
    color: var(--line) !important; background: var(--lime);
    box-shadow: inset 3px 3px 0 var(--lime-l), inset -3px -4px 0 var(--lime-d);
    transition: transform .08s steps(2), filter .08s;
}
.px-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.px-btn:active { transform: translateY(1px); box-shadow: inset 3px 4px 0 var(--lime-d); }
.px-btn:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.px-btn--dark { background: var(--panel-2); color: var(--text) !important; box-shadow: inset 3px 3px 0 #563063, inset -3px -4px 0 #1E0C23; }
.px-btn--dark:active { box-shadow: inset 3px 4px 0 #1E0C23; }
.px-btn--pink { background: var(--pink); box-shadow: inset 3px 3px 0 var(--pink-l), inset -3px -4px 0 var(--pink-d); }
.px-btn--pink:active { box-shadow: inset 3px 4px 0 var(--pink-d); }
.px-btn--gold { background: var(--gold); box-shadow: inset 3px 3px 0 var(--gold-l), inset -3px -4px 0 var(--gold-d); }
.px-btn--gold:active { box-shadow: inset 3px 4px 0 var(--gold-d); }
.px-btn--sm { padding: 6px 11px 8px; font-size: .95rem; }
.px-btn--big { padding: 12px 22px 14px; font-size: 1.2rem; }
.px-btn--block { width: 100%; }
.px-btn .pn-ico { width: calc(var(--w) * 3px); }

.pn-chip {
    display: inline-block; padding: 3px 8px 4px; border: 3px solid var(--line);
    background: var(--panel-2); color: var(--pink-l); font: 500 .78rem/1 var(--px-font); letter-spacing: .06em; text-transform: uppercase;
}
.pn-price { font: 600 1.6rem/1 var(--px-font); color: var(--lime); text-shadow: 2px 2px 0 var(--line); white-space: nowrap; }
.pn-price small { font-size: .8rem; color: var(--muted); text-shadow: none; margin-left: 2px; }
.pn-price--big { font-size: 2.2rem; }
.pn-soldout { font: 500 1rem var(--px-font); color: #FF9AAA; }

.pn-slot {
    position: relative; display: grid; place-items: center; box-sizing: border-box; padding: 0;
    background: var(--slot); border: 3px solid var(--line);
    box-shadow: inset 4px 4px 0 #0A030B, inset -4px -4px 0 #3D2244;
}
.pn-slot::before {           /* soft pixel glow behind the item, in the category colour */
    content: ""; position: absolute; inset: 14%;
    background: radial-gradient(circle, var(--a1, #4A2552) 0 34%, transparent 35%);
    opacity: .55; image-rendering: pixelated;
}
.pn-slot > svg, .pn-slot > img, .pn-slot > .pn-px { position: relative; }

/* category accents */
.pn-acc--ranks { --a1: #3F6B1E; --a2: #A6E22E; }
.pn-acc--pixie-gems { --a1: #6E2A63; --a2: #F28AD8; }
.pn-acc--subscriptions { --a1: #6E5418; --a2: #FFD24A; }
.pn-acc--bundles { --a1: #4E3480; --a2: #B48CFF; }
.pn-acc--events { --a1: #7A4626; --a2: #FFC48F; }
.pn-acc--patrons { --a1: #6E2A63; --a2: #FFD24A; }
.pn-acc--page, .pn-acc--all { --a1: #4A2552; --a2: #F28AD8; }

/* item names, coloured like rarities */
.pn-name--sprout { color: #B9F04A !important; }
.pn-name--bloom { color: #FF9EE2 !important; }
.pn-name--willow { color: #FFC48F !important; }
.pn-name--fae { color: #C7A6FF !important; }
.pn-name--enchanted, .pn-name--enchanted-plus-monthly, .pn-name--enchanted-plus-yearly {
    background: linear-gradient(90deg, #FF9EE5, #C99BFF); -webkit-background-clip: text; background-clip: text; color: transparent !important;
    text-shadow: none !important; filter: drop-shadow(3px 3px 0 var(--line));
}
.pn-name--enchanted-plus-monthly, .pn-name--enchanted-plus-yearly { background-image: linear-gradient(90deg, #FFE08A, #FF9EE5); }
[class*="pn-name--gems-"] { color: var(--pink-l) !important; }
.pn-name--starter-pack, .pn-name--supporter-title { color: var(--pink-l) !important; }
.pn-name--fairy-set, .pn-name--witchy-hollow, .pn-name--cottagecore-bundle { color: #D7C2FF !important; }
[class*="-drop-party"].pn-card__name, .pn-name--pinata-party { color: var(--gold-l) !important; }

/* ---------------- top bar ---------------- */
.pn-bar {
    position: sticky; top: 0; z-index: 40;
    background: var(--tex-planks) 0 0 / 64px 64px; image-rendering: pixelated;
    border-bottom: 3px solid var(--line); box-shadow: inset 0 -3px 0 var(--pink-d), 0 3px 0 rgba(0, 0, 0, .25);
}
.pn-bar__inner { max-width: 1240px; margin: 0 auto; padding: 8px 20px; box-sizing: border-box; display: flex; align-items: center; gap: 16px; image-rendering: auto; }
.pn-bar__logo { flex-shrink: 0; display: block; }
.pn-bar__logo img { display: block; height: 52px; width: auto; filter: drop-shadow(3px 3px 0 rgba(16, 5, 14, .7)); transition: transform .1s steps(2); }
.pn-bar__logo:hover img { transform: rotate(-3deg) scale(1.06); }
.pn-bar__links { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.pn-bar__links a {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px 9px; text-decoration: none;
    font: 500 1.08rem/1 var(--px-font); color: var(--text); text-shadow: 2px 2px 0 var(--line);
}
.pn-bar__links a:hover { color: var(--pink-l); }
.pn-bar__links a.is-on { color: var(--lime); }
.pn-bar__links a.is-on::before { content: "\25B8"; color: var(--lime); margin-right: -2px; }
.pn-bar__patrons .pn-ico { animation: pn-beat 2.4s steps(4) infinite; }
.pn-bar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pn-bar__login .pn-ico, .pn-bar__cart .pn-ico { width: 24px; height: auto; }
.pn-bar__cart { position: relative; }
.pn-bar__count {
    position: absolute; top: -12px; right: -12px; min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box;
    background: var(--pink); color: var(--line); border: 3px solid var(--line); font: 500 .8rem/16px var(--px-font); text-align: center;
}
.pn-bar__burger { display: none; width: 46px; height: 42px; padding: 0; flex-direction: column; gap: 5px; }
.pn-bar__burger span { display: block; width: 20px; height: 3px; background: var(--text); }
.pn-me { position: relative; }
.pn-me__btn img { width: 22px; height: 22px; image-rendering: pixelated; border: 2px solid var(--line); }
.pn-me__name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.pn-me__menu { position: absolute; right: 0; top: calc(100% + 8px); width: 220px; padding: 12px; }
.pn-me__menu p { margin: 0 0 10px; color: var(--muted); }

/* ---------------- hero: the night garden ---------------- */
#hero.pn-hero { transform: none !important; }
.pn-hero { position: relative; overflow: hidden; isolation: isolate; text-align: center; border-bottom: 3px solid var(--line); }
.pn-hero--home { padding: 22px 16px 128px; }
.pn-hero--sub { padding: 14px 16px 90px; }
.pn-sky {
    position: absolute; inset: 0; z-index: -2;
    background: linear-gradient(180deg,
        #120720 0 18%, #190A2A 18% 32%, #22103A 32% 45%, #30154A 45% 56%, #42195A 56% 66%,
        #571F68 66% 74%, #6E2A74 74% 81%, #8A3A84 81% 87%, #A84E93 87% 100%);
}
.pn-sky__stars { position: absolute; inset: 0 0 35% 0; background: var(--tex-stars) 0 0 / 256px 256px; image-rendering: pixelated; opacity: .85; }
.pn-twinkle {
    position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; background: var(--cream);
    box-shadow: 4px 0 0 rgba(255, 246, 227, .7), -4px 0 0 rgba(255, 246, 227, .7), 0 4px 0 rgba(255, 246, 227, .7), 0 -4px 0 rgba(255, 246, 227, .7);
    animation: pn-twinkle 3s steps(3) var(--t) infinite;
}
.pn-sky__moon { position: absolute; right: 9%; top: 34px; width: calc(17 * 5px); image-rendering: pixelated; animation: pn-bob 6s steps(4) infinite; }
.pn-cloud { position: absolute; left: 0; image-rendering: pixelated; opacity: .9; will-change: transform; animation: pn-drift linear infinite; }
.pn-cloud .pn-px { width: calc(var(--w) * var(--s)); }
.pn-cloud--a { top: 9%; animation-duration: 140s; animation-delay: -30s; }
.pn-cloud--b { top: 30%; animation-duration: 110s; animation-delay: -80s; opacity: .7; }
.pn-cloud--c { top: 50%; animation-duration: 170s; animation-delay: -120s; opacity: .55; }
.pn-hero__inner { position: relative; z-index: 3; max-width: 980px; margin: 0 auto; }
.pn-hero__logo { display: block; width: fit-content; margin: 0 auto; animation: pn-bob 5s steps(5) infinite; }
.pn-hero__logo img { display: block; width: min(700px, 90vw); height: auto; filter: drop-shadow(6px 6px 0 rgba(16, 5, 14, .55)); }
.pn-hero--sub .pn-hero__logo img { width: min(400px, 70vw); }
.pn-hero__tag {
    display: inline-block; margin: -6px 0 0; padding: 6px 14px 8px; border: 3px solid var(--line); background: rgba(16, 5, 14, .55);
    font: 500 1.25rem var(--px-font); color: var(--pink-l); text-shadow: 2px 2px 0 var(--line);
}
.pn-hero__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 22px; }
.pn-pill {
    display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; text-decoration: none; cursor: pointer; color: var(--text);
    background: var(--panel); border: 3px solid var(--line); box-shadow: inset 3px 3px 0 #563063, inset -3px -4px 0 #170A1C;
    transition: transform .08s steps(2);
}
.pn-pill:hover { transform: translateY(-3px); }
.pn-pill__icon {
    position: relative; width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.4rem;
    background: var(--lime); color: var(--line); border: 3px solid var(--line); box-shadow: inset 3px 3px 0 var(--lime-l), inset -3px -3px 0 var(--lime-d);
}
.pn-pill--discord .pn-pill__icon { background: var(--lilac); color: var(--line); box-shadow: inset 3px 3px 0 #DCC8FF, inset -3px -3px 0 #7E5CCB; }
.pn-pill__icon .pn-ico { width: 24px; }
.pn-pill .count {
    position: absolute; top: -12px; right: -14px; padding: 1px 6px 2px; border: 3px solid var(--line);
    background: var(--pink); color: var(--line); font: 500 .8rem/1.2 var(--px-font);
}
.pn-pill__text { text-align: left; line-height: 1.1; }
.pn-pill__text b { display: block; font: 500 1.15rem var(--px-font); text-shadow: 2px 2px 0 var(--line); }
.pn-pill__text p { margin: 3px 0 0; font: 500 .82rem var(--px-font); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.pn-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 2; }
.pn-ground__grass { position: absolute; inset: 0; background: var(--tex-grass) 0 0 / 64px 64px repeat-x; image-rendering: pixelated; }
.pn-ground__props { position: absolute; left: 0; right: 0; bottom: 52px; height: 0; }
.pn-prop { position: absolute; bottom: 0; image-rendering: pixelated; }
.pn-prop .pn-px { width: calc(var(--w) * var(--s)); }
.pn-prop--tree1 { left: max(-30px, calc(4% - 40px)); }
.pn-prop--tree2 { right: max(-30px, calc(4% - 40px)); }
.pn-prop--lantern { left: 15%; bottom: -4px; }
.pn-prop--mush { right: 16%; --s: 3px; }
.pn-prop--pixie { right: 23%; bottom: 120px; --s: 3px; animation: pn-flit 7s steps(14) infinite; }
.pn-flower { left: var(--x); --s: 3px; }
.pn-hero--sub .pn-prop--lantern, .pn-hero--sub .pn-prop--pixie { display: none; }
.pn-motes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pn-firefly {
    position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; background: #F6FFB0;
    box-shadow: 0 0 0 4px rgba(214, 255, 120, .22);
    animation: pn-float var(--d) steps(10) var(--t) infinite alternate, pn-twinkle 2.4s steps(3) var(--t) infinite;
}
.pn-petal {
    position: absolute; top: -12px; left: var(--x); width: 6px; height: 6px; background: var(--pink); box-shadow: 6px 6px 0 var(--pink-l);
    animation: pn-fall var(--d) steps(48) var(--t) infinite;
}
.pn-petal:nth-child(3n) { background: #fff; box-shadow: 6px 6px 0 var(--pink-l); }

/* ---------------- home ---------------- */
.pn-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.pn-tile {
    grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 170px;
    padding: 18px 22px; text-decoration: none; overflow: hidden;
    background:
        repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, .025) 18px 36px),
        linear-gradient(120deg, var(--a1) 0%, var(--panel) 62%) padding-box;
    transition: transform .1s steps(2), filter .1s;
}
.pn-tile--big { grid-column: span 3; min-height: 200px; }
.pn-tile:hover { transform: translateY(-4px); filter: brightness(1.1); }
.pn-tile:hover .pn-tile__art { animation: pn-bob 1.2s steps(4) infinite; }
.pn-tile__text { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pn-tile__name { font: 600 clamp(1.7rem, 3vw, 2.4rem)/1 var(--px-font); text-transform: uppercase; letter-spacing: .03em; color: var(--text); text-shadow: 3px 3px 0 var(--line); }
.pn-tile__sub { color: var(--muted); font-weight: 700; }
.pn-tile__go { font: 500 1rem var(--px-font); color: var(--a2); text-shadow: 2px 2px 0 var(--line); }
.pn-tile__art { flex-shrink: 0; width: calc(32 * 4px); image-rendering: pixelated; }
.pn-tile--big .pn-tile__art { width: calc(32 * 5px); }
.pn-tile__art .pn-px { filter: drop-shadow(4px 4px 0 rgba(16, 5, 14, .5)); }

.pn-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; margin-top: 22px; align-items: start; }
.pn-split__main { display: grid; gap: 22px; min-width: 0; }

.pn-welcome { padding: 22px 24px; }
.pn-welcome > p { margin: 10px 0 0; color: var(--muted); }
.pn-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pn-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--slot); border: 3px solid var(--line); box-shadow: inset 3px 3px 0 #0A030B, inset -3px -3px 0 #3D2244; }
.pn-steps .pn-ico { width: 27px; }
.pn-steps span { font-size: .92rem; color: var(--muted); line-height: 1.3; }
.pn-steps b { color: var(--text); font-family: var(--px-font); font-weight: 600; }

.pn-feature { display: flex; align-items: center; gap: 22px; padding: 20px; }
.pn-feature__slot { width: 176px; height: 176px; flex-shrink: 0; }
.pn-feature__slot .pn-px { width: calc(32 * 5px); }
.pn-feature__name { margin: 8px 0 6px; font: 600 2rem/1 var(--px-font); text-shadow: 3px 3px 0 var(--line); }
.pn-feature__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }

.pn-side { display: grid; gap: 16px; position: sticky; top: 84px; }
.pn-side__mods { display: flex; flex-direction: column; gap: 16px; }
.pn-side .pn-mod--top-yearly { display: none; }
.pn-side__note { display: flex; gap: 8px; align-items: flex-start; margin: -6px 0 0; color: var(--muted); font-size: .9rem; }
.pn-side__note .pn-ico { width: 21px; margin-top: 2px; }
.pn-side__patrons { display: flex; align-items: center; gap: 14px; padding: 12px 16px; text-decoration: none; background: linear-gradient(120deg, #5A2452, var(--panel)) padding-box; transition: transform .1s steps(2); }
.pn-side__patrons:hover { transform: translateY(-3px); }
.pn-side__patrons-art { width: 64px; flex-shrink: 0; image-rendering: pixelated; }
.pn-side__patrons b { display: block; font: 500 1.3rem var(--px-font); color: var(--gold); text-shadow: 2px 2px 0 var(--line); }
.pn-side__patrons small { color: var(--muted); font-size: .88rem; }

/* ---------------- modules ---------------- */
.pn-mod { padding: 16px 18px; }
.pn-mod__title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px !important; font: 500 1.3rem/1.1 var(--px-font); color: var(--text); text-shadow: 2px 2px 0 var(--line); }
.pn-mod__title .pn-ico { width: 24px; }
.pn-mod__meta { margin: 10px 0 0; color: var(--muted); font-size: .92rem; }
.pn-mod__meta b { color: var(--text); }
.pn-mod__note { margin: 10px 0 0; color: var(--muted); font-size: .92rem; }
.pn-xp { position: relative; height: 22px; margin-top: 26px; background: #120713; border: 3px solid var(--line); box-shadow: inset 0 3px 0 #000; }
.pn-xp__fill {
    position: absolute; left: 0; top: 0; bottom: 0; min-width: 6px;
    background: linear-gradient(180deg, var(--lime-l) 0 30%, var(--lime) 30% 70%, var(--lime-d) 70%);
}
.pn-xp::after { /* segment ticks like the XP bar */
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 3px), rgba(16, 5, 14, .85) calc(10% - 3px) 10%);
}
.pn-xp__lvl {
    position: absolute; left: 50%; top: -28px; transform: translateX(-50%);
    font: 500 1.25rem/1 var(--px-font); color: var(--lime);
    text-shadow: 2px 0 0 var(--line), -2px 0 0 var(--line), 0 2px 0 var(--line), 0 -2px 0 var(--line);
}

/* top supporters: a compact list in the sidebar ... */
.pn-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pn-top__p { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--slot); border: 3px solid var(--line); }
.pn-top__p.is-empty { opacity: .55; }
.pn-top__fig { position: relative; flex-shrink: 0; }
.pn-top__body { display: none; }
.pn-top__face { display: block; width: 36px; height: 36px; image-rendering: pixelated; border: 3px solid var(--line); }
.pn-top__p.is-empty .pn-top__fig::after { content: "?"; display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid var(--line); background: #241027; font: 500 1.2rem var(--px-font); color: var(--dim); }
.pn-top__tiara { position: absolute; left: 50%; top: -14px; width: 34px; transform: translateX(-50%); z-index: 2; image-rendering: pixelated; }
.pn-top__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 1.05rem var(--px-font); }
.pn-top__place { font: 500 1rem var(--px-font); color: var(--dim); }
.pn-top__p--1 .pn-top__place { color: var(--gold); }
.pn-side .pn-top__p:nth-child(n+4) { display: none; }
.pn-top__empty { display: none; }

/* recent supporters: a grid of heads with Minecraft-style tooltips */
.pn-heads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pn-heads li { position: relative; }
.pn-heads img { display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; border: 3px solid var(--line); box-sizing: border-box; background: var(--slot); transition: transform .08s steps(2); }
.pn-heads li:hover img, .pn-heads li:focus img { transform: translateY(-3px); }
.pn-tip {
    position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 20;
    display: none; flex-direction: column; gap: 2px; padding: 6px 10px; white-space: nowrap; text-align: left;
    background: #150818; border: 3px solid transparent;
    background: linear-gradient(#150818, #150818) padding-box, linear-gradient(180deg, var(--pink), #6E2E83) border-box;
    box-shadow: 0 0 0 3px var(--line);
}
.pn-heads li:hover .pn-tip, .pn-heads li:focus .pn-tip { display: flex; }
.pn-tip b { font: 500 1rem var(--px-font); color: var(--pink-l); }
.pn-tip span { font-size: .85rem; color: var(--text); }
.pn-tip em { font-size: .78rem; color: var(--dim); font-style: normal; }

/* ---------------- info cards ---------------- */
.pn-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.pn-info--two { grid-template-columns: repeat(2, 1fr); }
.pn-info__card { padding: 18px 20px; }
.pn-info__card p { margin: 0 0 12px; color: var(--muted); }

/* ---------------- page header (categories and pages) ---------------- */
.pn-head {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 26px;
    background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, .025) 18px 36px), linear-gradient(120deg, var(--a1, #4A2552) 0%, var(--panel) 65%) padding-box;
}
.pn-head--slim { margin-bottom: 18px; }
.pn-head__text { min-width: 0; }
.pn-head .px-title { font-size: clamp(2rem, 4vw, 2.9rem); }
.pn-head__desc { margin-top: 8px; max-width: 680px; color: var(--muted); }
.pn-head__desc p { margin: 0; }
.pn-head__art { flex-shrink: 0; width: calc(32 * 4px); image-rendering: pixelated; }
.pn-head__art .pn-px { filter: drop-shadow(4px 4px 0 rgba(16, 5, 14, .5)); animation: pn-bob 4s steps(4) infinite; }
.pn-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; font: 500 .95rem var(--px-font); }
.pn-crumbs a { color: var(--muted); text-decoration: none; }
.pn-crumbs a:hover { color: var(--lime); }
.pn-crumbs span { color: var(--pink); }
.pn-crumbs b { color: var(--text); font-weight: 600; }

/* ---------------- product grid ---------------- */
.pn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 18px; margin-top: 22px; }
.pn-grid--pixie-gems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pn-grid--subscriptions { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pn-card { display: flex; flex-direction: column; padding: 12px; transition: transform .1s steps(2); }
.pn-card:hover { transform: translateY(-4px); }
.pn-card__slot { width: 100%; aspect-ratio: 1 / .78; cursor: pointer; }
.pn-card__slot .pn-px { width: calc(32 * 4px); max-width: 80%; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .45)); transition: transform .1s steps(2); }
.pn-card:hover .pn-card__slot .pn-px { transform: scale(1.06) rotate(-2deg); }
.pn-card__body { display: flex; flex-direction: column; flex: 1; padding: 12px 4px 2px; }
.pn-card__body .pn-chip { align-self: flex-start; }
.pn-card__name { margin: 8px 0 6px !important; font: 600 1.5rem/1.05 var(--px-font); text-shadow: 3px 3px 0 var(--line); }
.pn-lore { list-style: none; margin: 0 0 12px; padding: 0; flex: 1; }
.pn-lore li { position: relative; padding-left: 14px; font-size: .9rem; color: var(--muted); line-height: 1.45; }
.pn-lore li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--a2, var(--pink)); box-shadow: 1px 1px 0 var(--line); }
.pn-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 3px dashed #4A2A50; }
.pn-card__btns { display: flex; gap: 6px; }

.pn-empty { text-align: center; padding: 30px; margin-top: 22px; }
.pn-empty .pn-px { width: calc(32 * 4px); margin: 0 auto; }
.pn-empty h3 { font: 600 1.6rem var(--px-font); margin: 10px 0 4px; }
.pn-empty p { color: var(--muted); }

/* ---------------- explainers, paper, prose ---------------- */
.pn-explain { padding: 20px 24px; margin-top: 22px; }
.pn-explain__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.pn-explain__grid > div { padding: 12px 14px; background: var(--slot); border: 3px solid var(--line); box-shadow: inset 3px 3px 0 #0A030B, inset -3px -3px 0 #3D2244; }
.pn-explain__grid h4 { display: flex; align-items: center; gap: 8px; font: 500 1.1rem var(--px-font); color: var(--pink-l); text-shadow: 2px 2px 0 var(--line); margin-bottom: 4px; }
.pn-explain__grid h4 .pn-ico { width: 21px; }
.pn-explain__grid p { margin: 0; color: var(--muted); font-size: .92rem; }
.pn-explain__grid a, .pn-prose a { color: var(--lime); }
.pn-explain__note { margin: 12px 0 0; color: var(--dim); font-size: .9rem; }

.pn-paper { padding: 22px 26px; margin-top: 22px; }
.pn-prose { line-height: 1.7; }
.pn-prose > :first-child { margin-top: 0; }
.pn-prose h2 { font: 600 1.5rem var(--px-font); color: var(--pink-l); text-shadow: 2px 2px 0 var(--line); margin: 1.2em 0 .35em; }
.pn-prose h3 { font: 500 1.25rem var(--px-font); color: var(--pink-l); margin: 1em 0 .3em; }
.pn-prose p { margin: .5em 0; color: var(--muted); }
.pn-prose strong { color: var(--text); }
.pn-prose ul, .pn-prose ol { margin: .5em 0; padding-left: 1.4em; color: var(--muted); }
.pn-prose ul { list-style: none; }
.pn-prose ul li { position: relative; }
.pn-prose ul li::before { content: ""; position: absolute; left: -1.1em; top: .6em; width: 6px; height: 6px; background: var(--pink); }
.pn-prose ol { list-style: decimal; }
.pn-prose ol li::marker { color: var(--pink); font-family: var(--px-font); font-weight: 600; }
.pn-prose li { margin: .25em 0; }
.pn-prose small { color: var(--dim); font-size: .78rem; letter-spacing: .02em; }

/* ---------------- rank comparison ---------------- */
.pn-compare { padding: 20px 22px; min-width: 0; max-width: 100%; }
.pn-compare__sub, .pn-compare__note { margin: 8px 0 0; color: var(--muted); font-size: .95rem; }
.pn-compare__note { color: var(--dim); font-size: .88rem; margin-top: 12px; }
.pn-compare__scroll { overflow-x: auto; margin-top: 14px; border: 3px solid var(--line); background: var(--slot); }
.pn-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .92rem; }
.pn-table th, .pn-table td { padding: 9px 8px; text-align: center; border-bottom: 3px solid #241027; }
.pn-table thead th { background: var(--panel-2); padding: 12px 8px; vertical-align: bottom; border-bottom: 3px solid var(--line); }
.pn-table__icon { display: block; width: 28px; margin: 0 auto 6px; image-rendering: pixelated; }
.pn-table__icon .pn-ico { width: 28px; }
.pn-rk { display: block; font: 500 1.05rem var(--px-font); text-shadow: 2px 2px 0 var(--line); }
.pn-rk--wanderer { color: #D7D0D5; } .pn-rk--sprout { color: #B9F04A; } .pn-rk--bloom { color: #FF9EE2; }
.pn-rk--willow { color: #FFC48F; } .pn-rk--fae { color: #C7A6FF; } .pn-rk--enchanted { color: #F2B6FF; }
.pn-table thead small { display: block; margin-top: 4px; font: 500 .95rem var(--px-font); color: var(--lime); }
.pn-table thead small small { display: inline; font-size: .7rem; color: var(--muted); }
.pn-table tbody th, .pn-table__what, .pn-table tfoot th { text-align: left !important; padding-left: 16px !important; color: var(--text); font-weight: 700; }
.pn-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.pn-table tbody tr:hover { background: rgba(242, 138, 216, .08); }
.pn-table td b { font: 500 1.05rem var(--px-font); color: var(--text); }
.pn-yes { display: inline-block; width: 21px; height: 21px; vertical-align: middle; background: var(--lime) var(--check) center / 21px 21px no-repeat; border: 3px solid var(--line); box-sizing: border-box; image-rendering: pixelated; }
.pn-no { display: inline-block; width: 12px; height: 3px; vertical-align: middle; background: #5A3F5E; }
.pn-table tfoot td, .pn-table tfoot th { border-bottom: 0; padding: 12px 8px; }
.pn-table__free { font: 500 .95rem var(--px-font); color: var(--dim); }

/* ---------------- product page ---------------- */
.pn-product { display: grid; grid-template-columns: 320px 1fr; gap: 26px; align-items: center; padding: 22px; }
.pn-product__slot { aspect-ratio: 1; }
.pn-product__slot .pn-px { width: calc(32 * 7px); max-width: 82%; filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, .45)); animation: pn-bob 4s steps(4) infinite; }
.pn-product__info .px-title { font-size: clamp(2rem, 4vw, 3rem); margin: 8px 0 8px; }
.pn-product__info .pn-lore li { font-size: 1rem; }
.pn-product__vat { margin: 4px 0 0; color: var(--dim); font-size: .85rem; }
.pn-product__buy { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---------------- patrons ---------------- */
.pn-patrons { display: grid; gap: 22px; margin-top: 22px; }
.pn-podium-zone { padding: 4px 0 0; }
.pn-podium-zone .pn-mod:not(.pn-mod--top-yearly) { display: none; }
.pn-podium-zone .pn-mod--top-yearly { border: 0; border-image: none; background: transparent; padding: 0; }
.pn-podium-zone .pn-mod--top-yearly .pn-mod__title { display: none; }
.pn-podium-zone .pn-top { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 10px; margin-top: 18px; }
.pn-podium-zone .pn-top__p { flex-direction: column; justify-content: flex-end; gap: 6px; padding: 0; background: none; border: 0; }
.pn-podium-zone .pn-top__p.is-empty { opacity: .8; }
.pn-podium-zone .pn-top__p--4 { order: 1; --bw: 66px; --ph: 54px; --pc: #F28AD8; --pd: #A84A96; }
.pn-podium-zone .pn-top__p--2 { order: 2; --bw: 82px; --ph: 96px; --pc: #E3E3EA; --pd: #9C9CAA; }
.pn-podium-zone .pn-top__p--1 { order: 3; --bw: 98px; --ph: 132px; --pc: #FFD24A; --pd: #C98A1A; }
.pn-podium-zone .pn-top__p--3 { order: 4; --bw: 82px; --ph: 76px; --pc: #FFC48F; --pd: #D07A48; }
.pn-podium-zone .pn-top__p--5 { order: 5; --bw: 66px; --ph: 40px; --pc: #B48CFF; --pd: #7E5CCB; }
.pn-podium-zone .pn-top__face, .pn-podium-zone .pn-top__fig::after { display: none !important; }
.pn-podium-zone .pn-top__body { display: block; width: var(--bw); height: calc(var(--bw) * 2); image-rendering: pixelated; object-fit: contain; }
.pn-podium-zone .pn-top__fig { filter: drop-shadow(4px 4px 0 rgba(16, 5, 14, .6)); }
.pn-podium-zone .pn-top__p--1 .pn-top__fig { animation: pn-bob 3s steps(3) infinite; }
.pn-podium-zone .pn-top__tiara { width: calc(var(--bw) * .8); top: calc(var(--bw) * -.27); }
.pn-podium-zone .pn-top__name { flex: none; max-width: 100%; font-size: 1.05rem; text-align: center; text-shadow: 2px 2px 0 var(--line); }
.pn-podium-zone .pn-top__p--1 .pn-top__name { color: var(--gold); font-size: 1.25rem; }
.pn-podium-zone .pn-top__place {
    display: grid; place-items: center; width: 100%; height: var(--ph); box-sizing: border-box;
    background: var(--pc); border: 3px solid var(--line); box-shadow: inset 4px 4px 0 rgba(255, 255, 255, .45), inset -4px -5px 0 var(--pd);
    font: 600 1.8rem var(--px-font); color: var(--line); text-shadow: 2px 2px 0 rgba(255, 255, 255, .45);
}
.pn-podium-zone .pn-top__empty { display: block; text-align: center; margin-top: 12px; }

.pn-tiers { padding: 20px 24px; }
.pn-tiers__sub { margin: 8px 0 0; color: var(--muted); max-width: 820px; }
.pn-tiers__sub b { color: var(--gold); }
.pn-tiers__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pn-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; background: var(--slot); border: 3px solid var(--line); box-shadow: inset 3px 3px 0 #0A030B, inset -3px -3px 0 #3D2244; text-align: center; }
.pn-tier__name { font: 500 1.25rem/1 var(--px-font); text-transform: uppercase; background: var(--tg); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 var(--line)); }
.pn-tier__stars { color: var(--gold); font-size: .9rem; letter-spacing: 1px; }
.pn-tier__amt { font: 500 1.05rem var(--px-font); color: var(--text); }
.pn-tier--t1 { --tg: linear-gradient(90deg, #F28AD8, #C99BFF); }
.pn-tier--t2 { --tg: linear-gradient(90deg, #FF7A8A, #F28AD8); }
.pn-tier--t3 { --tg: linear-gradient(90deg, #7FD3F7, #8FE3D9); }
.pn-tier--t4 { --tg: linear-gradient(90deg, #FFB38A, #FFD27A); }
.pn-tier--t5 { --tg: linear-gradient(90deg, #F28AD8, #FFD27A, #A6E22E, #8FE3D9, #C99BFF); }
.pn-tier--tc { --tg: linear-gradient(90deg, #8FF0C8, #8FF0C8); }
.pn-tier--tc .pn-tier__stars { color: var(--muted); font-size: .8rem; letter-spacing: 0; }
.pn-tiers__perks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pn-tiers__perks li { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; }
.pn-tiers__perks .pn-ico { width: 21px; }

.pn-hall { padding: 20px 24px; }
.pn-hall__grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pn-hall__card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: var(--slot); border: 3px solid var(--line); box-shadow: inset 3px 3px 0 #0A030B, inset -3px -3px 0 #3D2244; text-align: center; }
.pn-hall__bust { display: block; width: 64px; height: 64px; overflow: hidden; }
.pn-hall__bust img { display: block; width: 64px; height: 128px; image-rendering: pixelated; }
.pn-hall__name { font: 500 1.1rem var(--px-font); color: var(--text); text-shadow: 2px 2px 0 var(--line); }
.pn-tier--chip { flex-direction: row; padding: 3px 8px; gap: 6px; background: var(--panel-2); box-shadow: none; }
.pn-tier--chip .pn-tier__name { font-size: .95rem; }
.pn-hall__since { font-size: .82rem; color: var(--dim); }
.pn-hall__empty { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 14px; background: var(--slot); border: 3px solid var(--line); }
.pn-hall__empty-art { width: 96px; flex-shrink: 0; image-rendering: pixelated; }
.pn-hall__empty p { margin: 0; color: var(--muted); }
.pn-hall__empty b { color: var(--text); }

/* ---------------- product modal (an item tooltip) ---------------- */
.pn-tooltip {
    background: linear-gradient(#170A1C, #170A1C) padding-box, linear-gradient(180deg, var(--pink), #6E2E83) border-box;
    border: 3px solid transparent; box-shadow: 0 0 0 3px var(--line);
}
.pn-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pn-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 3, 12, .78); }
.pn-modal__panel { position: relative; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-sizing: border-box; padding: 22px; animation: pn-pop .12s steps(3); }
.pn-modal__x { position: absolute; top: 12px; right: 12px; z-index: 3; }
.pn-modal__top { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; padding-right: 40px; }
.pn-modal__slot { width: 120px; height: 120px; flex-shrink: 0; }
.pn-modal__slot .pn-px { width: 96px; }
.pn-modal__head h2 { font: 600 1.9rem/1.05 var(--px-font); margin-top: 8px; text-shadow: 3px 3px 0 var(--line); }
.pn-modal__price { margin: 8px 0 0; color: var(--muted); font-weight: 700; }
.pn-modal__price b { font: 600 1.7rem var(--px-font); color: var(--lime); text-shadow: 2px 2px 0 var(--line); }
.pn-modal__vat { margin: 2px 0 0; font-size: .82rem; color: var(--dim); }
.pn-modal__desc, .pn-modal__box { padding: 14px 16px; background: rgba(255, 255, 255, .03); border: 3px solid #2B142F; }
.pn-modal__box h4 { font: 500 1.2rem var(--px-font); margin-bottom: 6px; }
.pn-modal__box p { margin: 0 0 10px; color: var(--muted); }
.pn-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pn-modal__actions .pn-modal__actions { margin-top: 0; }
.pn-field { display: grid; gap: 6px; margin-top: 10px; font: 500 .95rem var(--px-font); color: var(--muted); }
.pn-field input, .pn-field select {
    width: 100%; box-sizing: border-box; padding: 12px 14px; font: 500 1.05rem var(--px-font); color: var(--text); outline: none;
    background: #0E050F; border: 3px solid var(--line); box-shadow: inset 3px 3px 0 #000, inset -3px -3px 0 #3D2244;
}
.pn-field input:focus, .pn-field select:focus { border-color: var(--lime); }
.pn-menu { display: grid; gap: 8px; }
.pn-menu h2 { font: 600 1.6rem var(--px-font); margin-bottom: 6px; }

/* ---------------- login + thank you ---------------- */
.pn-login, .pn-thanks { max-width: 620px; margin: 0 auto; padding: 26px; text-align: center; }
.pn-login__slot { width: 96px; height: 96px; margin: 0 auto 14px; }
.pn-login__slot img { width: 64px; height: 64px; image-rendering: pixelated; position: relative; }
.pn-login__sub { margin: 10px 0 0; color: var(--muted); }
.pn-login__form { display: grid; gap: 14px; margin-top: 18px; text-align: left; }
.pn-login__legal { margin: 0; color: var(--dim); font-size: .85rem; text-align: center; }
.pn-login__legal a, .pn-login__why a { color: var(--lime); }
.pn-login__why { display: grid; gap: 8px; margin-top: 18px; text-align: left; }
.pn-login__why p { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; background: var(--slot); border: 3px solid var(--line); color: var(--muted); font-size: .92rem; }
.pn-login__why .pn-ico { width: 21px; margin-top: 2px; }
.pn-login__why b { color: var(--text); }
.pn-thanks__art { width: calc(32 * 5px); margin: 0 auto 6px; animation: pn-flit 6s steps(12) infinite; }
.pn-thanks__lead { margin: 8px 0 0; font: 500 1.2rem var(--px-font); color: var(--pink-l); }
.pn-thanks__text { margin-top: 10px; }
.pn-steps--row { grid-template-columns: repeat(3, 1fr); text-align: left; }
.pn-thanks__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }

/* ---------------- toast ---------------- */
.pn-toast { position: fixed; top: 86px; right: 16px; z-index: 70; display: flex; align-items: center; gap: 12px; max-width: 380px; padding: 10px 12px 10px 16px; font: 500 1rem var(--px-font); }
#cart-notification { top: 86px !important; border-radius: 0 !important; border: 3px solid var(--line); font-family: var(--px-font); }

/* ---------------- footer ---------------- */
.pn-foot { position: relative; margin-top: 30px; }
.pn-foot__grass { height: 64px; background: var(--tex-grass) 0 0 / 64px 64px repeat-x; image-rendering: pixelated; border-top: 3px solid var(--line); }
.pn-foot__dirt {
    padding: 26px 0 30px; color: var(--muted);
    background: linear-gradient(rgba(20, 8, 20, .82), rgba(12, 4, 12, .94)), var(--tex-dirt) 0 0 / 64px 64px;
}
.pn-foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 26px; }
.pn-foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pn-foot__logo img { display: block; width: 220px; height: auto; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .5)); }
.pn-foot__col { display: flex; flex-direction: column; gap: 6px; }
.pn-foot__col h4 { font: 500 1.25rem var(--px-font); color: var(--text); text-shadow: 2px 2px 0 var(--line); margin-bottom: 4px; }
.pn-foot__col a { color: var(--muted); text-decoration: none; font-weight: 700; }
.pn-foot__col a:hover { color: var(--lime); }
.pn-foot__col p { margin: 0 0 4px; font-size: .92rem; }
.pn-foot__legal { margin-top: 24px; padding-top: 18px; border-top: 3px dashed #3D2244; text-align: center; font-size: .9rem; }
.pn-foot__legal p { margin: 5px 0; }
.pn-foot__legal a { color: var(--lime); }
.pn-foot__legal b { color: var(--text); }
.pn-foot__disclaimer { font: 500 .92rem var(--px-font) !important; letter-spacing: .04em; color: var(--text); }

/* ---------------- Summit's basket drawer, cart and account pages ---------------- */
.pn-container:has(> .inner-content) { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: start; }
.pn-container > .sidebar { order: 0; max-width: none !important; }
.pn-container > .inner-content { order: 1; }
.bg-content { background: var(--panel) !important; color: var(--text); border: 3px solid var(--line); border-radius: 0 !important; }
.bg-content-light { background: var(--panel-2) !important; border-radius: 0 !important; }
.bg-primary { background: var(--lime) !important; color: var(--line) !important; border-radius: 0 !important; }
.bg-primary .text-white, .bg-primary i { color: var(--line) !important; }
.text-primary { color: var(--lime) !important; }
.text-muted { color: var(--muted) !important; }
.bg-secondary { background: var(--pink) !important; }
.border-content-light { border-color: rgba(255, 255, 255, .08) !important; }
.pn .rounded-xl, .pn .rounded-2xl, .pn .rounded-lg { border-radius: 0 !important; }
.btn-shine { position: relative; overflow: hidden; }
.custom-avatar { overflow: hidden; }
.card-loading { position: absolute; inset: 0; background: rgba(28, 12, 34, .85); z-index: 5; }
.loader { width: 44px; height: 44px; border: 5px solid var(--cream); border-bottom-color: transparent; display: inline-block; animation: pn-spin 1s steps(8) infinite; }
.gift-icon { cursor: pointer; background: rgba(255, 255, 255, .16); }
.modal-nav { padding-right: 15px !important; }

/* ---------------- legibility: small text and numbers use the body font ---------------- */
.pn-chip { font: 800 .72rem/1 var(--body-font) !important; letter-spacing: .08em; }
.pn-crumbs, .pn-crumbs b { font: 800 .85rem var(--body-font) !important; }
.pn-table td b, .pn-table thead small, .pn-table__free, .pn-tier__amt { font: 800 1rem var(--body-font) !important; }
.pn-table thead small { font-size: .9rem !important; }
.pn-pill__text p, .pn-foot__disclaimer { font: 800 .74rem var(--body-font) !important; letter-spacing: .06em; }
.pn-foot__disclaimer { font-size: .8rem !important; }
.pn-field input, .pn-field select { font: 700 1.05rem var(--body-font); }
.pn-steps b, .pn-tip span { font-family: var(--body-font); font-weight: 800; }
.pn-tile__go, .px-link, .pn-side__patrons small, .pn-top__name, .pn-top__empty { font-family: var(--body-font) !important; font-weight: 800 !important; }
.pn-tile__go { font-size: .95rem; letter-spacing: .02em; }
.pn-price small { font-family: var(--body-font); font-weight: 800; }

/* numbers and prices: Silkscreen, a pixel font with unmistakable digits */
.pn-num { font-family: 'Silkscreen', var(--px-font); font-weight: 400; letter-spacing: 0; font-size: .82em; }
.pn-price, .pn-modal__price b, .pn-xp__lvl, .pn-top__place, .pn-bar__count, .pn-pill .count, .pn-podium-zone .pn-top__place {
    font-family: 'Silkscreen', var(--px-font) !important; font-weight: 400 !important; letter-spacing: 0;
}
.pn-price { font-size: 1.35rem; }
.pn-price--big { font-size: 1.9rem; }
.pn-modal__price b { font-size: 1.5rem !important; }
.pn-podium-zone .pn-top__body--ghost { filter: brightness(0) invert(1); opacity: .13; }

/* sidebar order: goal first, then the month's top supporters, then recent heads */
.pn-side__mods .pn-mod--goal { order: 1; }
.pn-side__mods .pn-side__note { order: 2; }
.pn-side__mods .pn-mod--top { order: 3; }
.pn-side__mods .pn-mod--recent { order: 4; }
.pn-side__mods > * { order: 5; }
/* every card in these grids would show the same chip as the page title */
.pn-grid--ranks .pn-chip, .pn-grid--events .pn-chip { display: none; }
/* tables in custom pages (What Pixie Gems buy) */
.pn-prose table { width: 100%; margin: .4em 0 1em; border-collapse: collapse; font-size: .95rem; }
.pn-prose th, .pn-prose td { padding: 6px 10px; text-align: left; border-bottom: 2px solid var(--line); color: var(--muted); }
.pn-prose th { color: var(--text); font-family: var(--px-font); font-weight: 500; }
.pn-prose td:not(:first-child), .pn-prose th:not(:first-child) { text-align: right; white-space: nowrap; }
.pn-prose tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.pn-side .pn-top__p.is-empty { display: none; }
.pn-side .pn-top__empty { display: block; margin: 0; }
.pn-side .pn-mod--top:has(.pn-top__empty) .pn-top { display: none; }

/* ---------------- motion ---------------- */
@keyframes pn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pn-flit { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-12px, -10px); } 50% { transform: translate(-4px, -18px); } 75% { transform: translate(8px, -8px); } }
@keyframes pn-drift { from { transform: translateX(-320px); } to { transform: translateX(105vw); } }
@keyframes pn-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes pn-float { from { transform: translate(0, 0); } to { transform: translate(24px, -36px); } }
@keyframes pn-fall {
    0% { transform: translate(0, 0); opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { transform: translate(-140px, 640px); opacity: 0; }
}
@keyframes pn-spin { to { transform: rotate(360deg); } }
@keyframes pn-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes pn-pop { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- home page: four sections on one rhythm (heading, then content), framed only where you click ---- */
.pn-band { margin-top: 34px; }
.pn-band--first { margin-top: 8px; }
.pn-band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pn-band__head .px-title { margin: 0; font-size: 1.7rem; }
.pn-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pn-cat {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 12px 18px; text-align: center; text-decoration: none;
    background: linear-gradient(180deg, var(--a1) 0%, var(--panel) 75%) padding-box; transition: transform .1s steps(2);
}
.pn-cat:hover { transform: translateY(-4px); }
.pn-cat__art { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 6px; image-rendering: pixelated; }
.pn-cat__art .pn-px { width: 96px; filter: drop-shadow(3px 3px 0 rgba(16, 5, 14, .5)); }
.pn-cat:hover .pn-cat__art { animation: pn-bob 1.2s steps(4) infinite; }
.pn-cat__name { font: 600 1.3rem/1.05 var(--px-font); text-transform: uppercase; letter-spacing: .02em; color: var(--text); text-shadow: 2px 2px 0 var(--line); }
.pn-cat__sub { color: var(--muted); font: 700 .86rem var(--body-font); }
.pn-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pn-offer { display: flex; align-items: stretch; gap: 20px; padding: 20px; }
.pn-offer__slot { align-self: center; width: 132px; height: 132px; flex-shrink: 0; cursor: pointer; }
.pn-offer__slot .pn-px { width: 104px; }
.pn-offer__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pn-offer__name { margin: 8px 0 6px; font: 600 1.6rem/1.05 var(--px-font); text-shadow: 3px 3px 0 var(--line); }
.pn-offer__buy { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: auto; padding-top: 14px; }
.pn-offer__buy .pn-price { margin-right: auto; }
.pn-community__panel { padding: 0; }
.pn-community__mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pn-community__mods > .pn-mod { border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important; padding: 18px 22px; }
.pn-community__mods > .pn-mod--top, .pn-community__mods > .pn-mod--recent { border-left: 3px solid var(--line) !important; }
.pn-community__mods .pn-mod--goal { order: 1; }
.pn-community__mods .pn-mod--top { order: 2; }
.pn-community__mods .pn-mod--recent { order: 3; }
.pn-community__mods > * { order: 4; }
.pn-community .pn-mod--top-yearly { display: none; }
.pn-community .pn-top__p:nth-child(n+4), .pn-community .pn-top__p.is-empty { display: none; }
.pn-community .pn-top__empty { display: block; margin: 0; }
.pn-community .pn-mod--top:has(.pn-top__empty) .pn-top { display: none; }
.pn-community__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 12px 18px; border-top: 3px solid var(--line); color: var(--muted); font-size: .9rem; text-align: center; }
.pn-community__note .pn-ico { width: 21px; flex-shrink: 0; }
.pn-howto { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 6px; }
.pn-howto__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; }
.pn-howto__steps li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .95rem; }
.pn-howto__steps .pn-ico { width: 27px; flex-shrink: 0; }
.pn-howto__steps b { color: var(--text); font-family: var(--body-font); font-weight: 800; }
.pn-howto__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.pn-howto__links a { color: var(--lime); font: 800 .9rem var(--body-font); text-decoration: none; }
.pn-howto__links a:hover { text-decoration: underline; }
@media (max-width: 1100px) {
    .pn-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .pn-cat { grid-column: span 2; }
    .pn-cat:nth-child(n+4) { grid-column: span 3; }
    .pn-offers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
    .pn-community__mods { grid-template-columns: minmax(0, 1fr); }
    .pn-community__mods > .pn-mod--top, .pn-community__mods > .pn-mod--recent { border-left: 0 !important; border-top: 3px solid var(--line) !important; }
}
@media (max-width: 600px) {
    .pn-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pn-cat, .pn-cat:nth-child(n+4) { grid-column: span 1; }
    .pn-cat:last-child { grid-column: span 2; }
    .pn-cat__art { width: 72px; height: 72px; }
    .pn-cat__art .pn-px { width: 72px; }
    .pn-offer { flex-direction: column; align-items: flex-start; }
    .pn-offer__slot { width: 112px; height: 112px; align-self: flex-start; }
    .pn-offer__slot .pn-px { width: 88px; }
    .pn-howto__steps { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .pn *, .pn *::before, .pn *::after { animation: none !important; transition: none !important; }
    .pn-petal, .pn-firefly { display: none; }
    html { scroll-behavior: auto; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
    .pn-bar__links { display: none; }
    .pn-bar__links.is-open {
        display: grid; position: absolute; top: 100%; left: 0; right: 0; gap: 0; padding: 8px 20px 14px;
        background: var(--panel); border-bottom: 3px solid var(--line); box-shadow: inset 0 -3px 0 var(--pink-d);
    }
    .pn-bar__links.is-open a { padding: 12px 6px; font-size: 1.2rem; }
    .pn-bar__burger { display: inline-flex; }
    .pn-bar__actions { margin-left: auto; }
    .pn-split { grid-template-columns: minmax(0, 1fr); }
    .pn-side { position: static; }
    .pn-foot__grid { grid-template-columns: 1fr 1fr; }
    .pn-tiers__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
    .pn-tile, .pn-tile--big { grid-column: span 6; min-height: 0; }
    .pn-info, .pn-info--two, .pn-explain__grid { grid-template-columns: 1fr; }
    .pn-steps, .pn-steps--row { grid-template-columns: 1fr; }
    .pn-product { grid-template-columns: 1fr; }
    .pn-product__slot { max-width: 300px; width: 100%; margin: 0 auto; }
    .pn-grid--pixie-gems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pn-container:has(> .inner-content) { grid-template-columns: 1fr; }
    .pn-container > .sidebar { order: 2; }
    .pn-prop--lantern, .pn-prop--pixie { display: none; }
    .pn-podium-zone .pn-top { gap: 4px; }
    .pn-podium-zone .pn-top__p--4, .pn-podium-zone .pn-top__p--5 { --bw: 48px; }
    .pn-podium-zone .pn-top__p--2, .pn-podium-zone .pn-top__p--3 { --bw: 58px; }
    .pn-podium-zone .pn-top__p--1 { --bw: 70px; }
    .pn-podium-zone .pn-top__name { font-size: .8rem !important; }
    .pn-podium-zone .pn-top__place { font-size: 1.3rem; }
}
@media (max-width: 600px) {
    .pn-container { padding: 0 14px; }
    .pn-bar__inner { padding: 6px 12px; gap: 8px; }
    .pn-bar__logo img { height: 40px; }
    .pn-bar__login span, .pn-bar__cart-label, .pn-me__name { display: none; }
    .pn-hero--home { padding: 26px 12px 120px; min-height: 0; }
    .pn-hero--sub { padding: 18px 12px 96px; }
    .pn-ground__props { --s: 3px; }
    .pn-prop--tree1, .pn-prop--tree2 { --s: 2px; }
    .pn-prop--mush { display: none; }
    .pn-sky__moon { width: 56px; right: 6%; top: 18px; }
    .pn-head { flex-direction: column-reverse; align-items: flex-start; padding: 16px 18px; }
    .pn-head__art { width: 96px; }
    .pn-tile { padding: 14px 16px; }
    .pn-tile__art, .pn-tile--big .pn-tile__art { width: 96px; }
    .pn-feature { flex-direction: column; align-items: flex-start; }
    .pn-feature__slot { width: 140px; height: 140px; }
    .pn-feature__slot .pn-px { width: 112px; }
    .pn-grid, .pn-grid--pixie-gems { grid-template-columns: 1fr; }
    .pn-foot__grid { grid-template-columns: 1fr; }
    .pn-tiers__list { grid-template-columns: repeat(2, 1fr); }
    .pn-modal__top { flex-direction: column; align-items: flex-start; }
    .pn-modal__panel { padding: 16px; }
    .pn-heads { grid-template-columns: repeat(5, 1fr); }
}