:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-border-radius: 0;
}

html,
body {
    height: 100%;
}

body {
    background: var(--bs-secondary-bg);
    display: flex;
    flex-direction: column;
}

#app {
    flex-shrink: 0;
}

.content {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

a {
    text-decoration: none;
}

/*Navbar*/
.navbar {
    box-shadow: 1px 2px 15px rgba(var(--bs-primary-rgb), 0.7);
}

.navbar-brand img {
    max-height: 75px;
    max-width: 150px;
}

.navbar .nav-item {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.navbar .nav-link {
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Home */
.home-btn {
    text-transform: uppercase;
    font-weight: 600;
}

.title-separator {
    height: 0.3rem;
    width: 6rem;
    text-align: center;
    background: var(--bs-primary);
    margin: 1.5rem auto;
    border: 0;
}

/* Footer */
.footer-links li:not(:last-child) {
    margin-bottom: 0.75rem;
    border-bottom: 1px dashed rgba(var(--bs-body-color-rgb), 0.4);
    padding-bottom: 0.75rem;
}

/* JustPvP.Me store overrides */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-primary: #ff2a1f;
    --bs-primary-rgb: 255, 42, 31;
    --bs-body-bg: #121214;
    --bs-body-bg-rgb: 18, 18, 20;
    --bs-body-color: #ececf1;
    --bs-body-color-rgb: 236, 236, 241;
    --bs-secondary-bg: #1b1b1f;
    --bs-secondary-bg-rgb: 27, 27, 31;
    --bs-tertiary-bg: #222228;
    --bs-tertiary-bg-rgb: 34, 34, 40;
    --bs-border-color: #2e2e36;
    --bs-secondary-color: #9b9ba8;
    --bs-link-color: #ff8a5c;
    --bs-link-hover-color: #ff2a1f;
}

body {
    background: #121214;
    color: #ececf1;
    font-family: Inter, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.home-btn {
    font-family: 'Lilita One', Inter, sans-serif;
    letter-spacing: 0.025em;
}

.card,
.dropdown-menu,
.modal-content,
.list-group-item,
.form-control,
.form-select {
    background-color: #1b1b1f;
    border-color: #2e2e36;
    color: #ececf1;
}

.form-control:focus,
.form-select:focus {
    background-color: #222228;
    border-color: #ff2a1f;
    box-shadow: 0 0 0 .2rem rgba(255, 42, 31, .20);
    color: #ececf1;
}

.text-muted,
.text-body-secondary {
    color: #9b9ba8 !important;
}

.btn-primary {
    --bs-btn-bg: #ff2a1f;
    --bs-btn-border-color: #ff2a1f;
    --bs-btn-hover-bg: #b30f08;
    --bs-btn-hover-border-color: #b30f08;
    --bs-btn-active-bg: #b30f08;
    --bs-btn-active-border-color: #b30f08;
}

.btn-outline-primary {
    --bs-btn-color: #ff8a5c;
    --bs-btn-border-color: #ff8a5c;
    --bs-btn-hover-bg: #ff2a1f;
    --bs-btn-hover-border-color: #ff2a1f;
}

.navbar {
    background: #1b1b1f;
    border-bottom: 1px solid #2e2e36;
}

.footer {
    background: #1b1b1f !important;
    border-top: 1px solid #2e2e36;
}

/* ===== JustPvP.Me store layout (2026-10-01) ===== */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: linear-gradient(to bottom, #ff8a5c, #ff2a1f 55%);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: transparent;
    background: linear-gradient(to bottom, #ff8a5c, #ff2a1f 55%);
    border: 0;
    box-shadow: inset 0 -3px 0 #b30f08;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(to bottom, #ff8a5c, #ff2a1f 55%) !important;
    filter: brightness(1.08);
    box-shadow: inset 0 -3px 0 #b30f08 !important;
}

.jpm-progress-bar {
    background-color: #41d67a !important;
}

/* Topbar: cross-site quick links */
.jpm-topbar {
    background: #0e0e10;
    border-bottom: 1px solid #2e2e36;
    font-size: 0.82rem;
    padding: 0.4rem 0;
}

.jpm-topbar-link {
    color: #9b9ba8;
    font-weight: 600;
    text-decoration: none;
}

.jpm-topbar-link:hover,
.jpm-topbar-link.active {
    color: #ececf1;
}

.jpm-topbar-dropdown .dropdown-menu {
    font-size: 0.85rem;
}

/* Header: account left, logo center, cart right */
.jpm-header {
    background: #1b1b1f;
    border-bottom: 1px solid #2e2e36;
    box-shadow: none;
}

.jpm-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.jpm-header-account,
.jpm-header-cart {
    flex: 1 1 0;
    display: flex;
    align-items: center;
}

.jpm-header-cart {
    justify-content: flex-end;
}

.jpm-account-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.jpm-header-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.jpm-header-logo img {
    height: 36px;
    width: auto;
    max-width: 220px;
}

.jpm-cart-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 10px;
    background: #222228;
    border: 1px solid #2e2e36;
    color: #ececf1;
    font-weight: 600;
    text-decoration: none;
}

.jpm-cart-btn:hover {
    border-color: #ff2a1f;
    color: #ececf1;
}

.jpm-cart-icon {
    position: relative;
}

.jpm-cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #ff2a1f;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
}

/* Category strip */
.jpm-category-strip {
    background: #1b1b1f;
    border-bottom: 1px solid #2e2e36;
    padding: 0.75rem 0;
    margin-bottom: 2rem;
}

.jpm-category-strip-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.jpm-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: #222228;
    border: 1px solid #2e2e36;
    color: #ececf1;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.jpm-pill:hover {
    border-color: #ff8a5c;
    color: #ececf1;
}

.jpm-pill.active {
    background: linear-gradient(to bottom, #ff8a5c, #ff2a1f 55%);
    border-color: transparent;
    box-shadow: inset 0 -2px 0 #b30f08;
}

.jpm-pill-sub {
    opacity: 0.85;
    font-size: 0.85rem;
}

/* Welcome card */
.jpm-welcome-title {
    font-family: 'Lilita One', Inter, sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.jpm-accent {
    color: #ff2a1f;
}

.jpm-server-address {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #222228;
    border: 1px solid #2e2e36;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    margin: 1rem 0;
    width: fit-content;
}

.jpm-server-address code {
    font-family: 'Lilita One', Inter, sans-serif;
    font-size: 1.05rem;
    color: #ececf1;
}

.jpm-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: #2e2e36;
    color: #ececf1;
    border-radius: 7px;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.jpm-copy-btn:hover {
    background: #ff2a1f;
}

.jpm-payment-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.jpm-payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #222228;
    border: 1px solid #2e2e36;
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    color: #9b9ba8;
}

.jpm-welcome-content {
    margin-bottom: 1.5rem;
}

.jpm-info-box {
    background: #16161a;
    border: 1px solid #2e2e36;
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.jpm-info-box h2 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9b9ba8;
    margin-bottom: 0.6rem;
}

.jpm-info-box ul {
    margin: 0;
    padding-left: 1.1rem;
    color: #ececf1;
}

.jpm-info-box li {
    margin-bottom: 0.4rem;
}

/* Sidebar widgets */
.jpm-sidebar-card .card-header {
    background: #222228;
    border-bottom: 1px solid #2e2e36;
    font-weight: 600;
}

.jpm-avatar {
    object-fit: cover;
}

/* Discord auth button */
.jpm-divider-or {
    border-color: #2e2e36;
    margin: 1.25rem 0;
}

.jpm-btn-discord {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #5865f2;
    color: #fff;
    box-shadow: inset 0 -3px 0 #3c45b5;
    border: 0;
    font-weight: 600;
}

.jpm-btn-discord:hover {
    filter: brightness(1.08);
    color: #fff;
}

/* Footer additions */
.jpm-footer-address {
    color: #9b9ba8;
    font-size: 0.85rem;
}

.jpm-legal {
    color: #9b9ba8;
    font-size: 0.78rem;
}

@media (max-width: 575.98px) {
    .jpm-header-logo img {
        height: 28px;
    }

    .jpm-cart-btn {
        padding: 0.35rem 0.6rem;
    }
}

/* ===== JustPvP.Me store: home-page polish (2026-10-01) =====
   Brings the store in line with justpvp.me: rounded cards, carbon fibre background, frosted sticky header,
   a panorama hero with embers + live server pill, glassy category pills, icon tiles, lifting package cards,
   and the same entrance motion (off under prefers-reduced-motion). Appended after the earlier store layout CSS. */

:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-border-radius: 14px;
    --bs-border-radius-sm: 10px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-xl: 18px;
    --jpm-bg: #121214;
    --jpm-panel: #1b1b1f;
    --jpm-panel-2: #222228;
    --jpm-line: #2e2e36;
    --jpm-text: #ececf1;
    --jpm-muted: #9b9ba8;
    --jpm-red: #ff2a1f;
    --jpm-red-deep: #b30f08;
    --jpm-orange: #ff8a5c;
    --jpm-green: #41d67a;
}

html, body { overflow-x: clip; }
body {
    background-color: var(--jpm-bg);
    /* carbon fibre, like justpvp.me */
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%),
        linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}

/* Buttons + inputs: rounded like the home page */
.btn { --bs-btn-border-radius: 11px; font-weight: 700; }
.btn-primary, .btn-outline-primary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn-outline-primary { --bs-btn-color: var(--jpm-text); --bs-btn-border-color: var(--jpm-line); background: var(--jpm-panel-2); }
.btn-outline-primary:hover { --bs-btn-hover-color: #fff; }
.form-control, .form-select { border-radius: 10px; }
.card { border-radius: 14px; overflow: hidden; }
.modal-content { border-radius: 16px; }

/* Header: frosted + sticky, like the home nav */
header.bg-body {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(18,18,20,.82) !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.jpm-header { background: transparent; }
.jpm-topbar { background: rgba(10,10,12,.6); }
.jpm-cart-btn { border-radius: 11px; transition: border-color .15s, transform .15s; }
.jpm-cart-btn:hover { transform: translateY(-1px); }

/* ---------- hero ---------- */
.jpm-hero {
    position: relative; isolation: isolate; overflow: hidden;
    width: 100vw; margin-left: calc(50% - 50vw); margin-top: -3rem; margin-bottom: 2.5rem;
    padding: 64px 20px 34px; text-align: center; border-bottom: 1px solid var(--jpm-line);
    background: #121214;
}
.jpm-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -2;
    /* 1920px / 43 KB cut of justpvp.me's 5.9 MB hero-full.webp; it sits under a dark overlay anyway */
    background: url("../img/hero-lite.webp?v=1") center 45% / cover no-repeat;
    animation: jpm-drift 30s ease-in-out infinite alternate;
}
.jpm-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse at 50% 40%, rgba(18,18,20,.30), rgba(18,18,20,.82) 75%), linear-gradient(to bottom, rgba(18,18,20,.10) 30%, var(--jpm-bg));
}
.jpm-hero-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; display: grid; justify-items: center; }
.jpm-eyebrow {
    margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--jpm-orange);
}
.jpm-hero-title {
    margin: 0; font-family: 'Lilita One', Inter, sans-serif; font-weight: 400; letter-spacing: .5px;
    font-size: clamp(40px, 6vw, 64px); line-height: 1.05; text-shadow: 0 6px 24px rgba(0,0,0,.55);
}
.jpm-hero-title span { color: var(--jpm-red); }
.jpm-hero-sub { color: #c3c3cd; max-width: 560px; margin: 12px 0 0; font-size: 1.02rem; }

.jpm-pill-status {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding: 9px 16px; cursor: pointer;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(18,18,20,.55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: var(--jpm-text); font: 600 14px Inter, system-ui, sans-serif; box-shadow: 0 8px 26px rgba(0,0,0,.35);
    transition: border-color .15s, background .15s;
}
.jpm-pill-status:hover { border-color: rgba(255,42,31,.7); background: rgba(27,27,31,.75); }
.jpm-pill-status .jpm-sep { color: rgba(255,255,255,.35); }
.jpm-pill-status .jpm-addr { font-family: 'Lilita One', Inter, sans-serif; font-weight: 400; font-size: 19px; letter-spacing: .3px; }
.jpm-copy-icon { color: var(--jpm-orange); }
.jpm-dot { width: 9px; height: 9px; border-radius: 50%; background: #666; display: inline-block; }
.jpm-dot.on { background: var(--jpm-green); animation: jpm-pulse 2s infinite; }
.jpm-dot.off { background: var(--jpm-red); }

/* category pills, glassy like the home portals */
.jpm-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.jpm-cat {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px;
    background: rgba(27,27,31,.78); border: 1px solid var(--jpm-line); color: var(--jpm-text);
    font-weight: 600; font-size: .92rem; text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,.35);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.jpm-cat:hover { color: var(--jpm-text); border-color: var(--jpm-red); transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(255,42,31,.12), 0 12px 24px rgba(0,0,0,.4); }
.jpm-cat.active {
    color: #fff; border-color: transparent;
    background: linear-gradient(to bottom, var(--jpm-orange), var(--jpm-red) 55%); box-shadow: inset 0 -3px 0 var(--jpm-red-deep), 0 10px 24px rgba(255,42,31,.25);
}
.jpm-cat-sub { font-size: .85rem; opacity: .9; }
.jpm-category-strip { display: none; } /* replaced by the pills in the hero */

/* embers (same as justpvp.me) */
.jpm-embers { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.jpm-embers i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; opacity: 0;
    background: var(--jpm-orange); box-shadow: 0 0 8px 2px rgba(255,90,40,.55); animation: jpm-ember 11s linear infinite; }
.jpm-embers i:nth-child(1)  { left: 7%;  animation-delay: 0s;   animation-duration: 12s; }
.jpm-embers i:nth-child(2)  { left: 16%; animation-delay: 4s;   animation-duration: 9s;  width: 3px; height: 3px; }
.jpm-embers i:nth-child(3)  { left: 25%; animation-delay: 7s;   animation-duration: 13s; }
.jpm-embers i:nth-child(4)  { left: 34%; animation-delay: 2s;   animation-duration: 10s; width: 2px; height: 2px; }
.jpm-embers i:nth-child(5)  { left: 43%; animation-delay: 9s;   animation-duration: 12s; }
.jpm-embers i:nth-child(6)  { left: 52%; animation-delay: 5s;   animation-duration: 14s; width: 3px; height: 3px; }
.jpm-embers i:nth-child(7)  { left: 61%; animation-delay: 1s;   animation-duration: 11s; }
.jpm-embers i:nth-child(8)  { left: 69%; animation-delay: 8s;   animation-duration: 10s; width: 2px; height: 2px; }
.jpm-embers i:nth-child(9)  { left: 77%; animation-delay: 3s;   animation-duration: 13s; }
.jpm-embers i:nth-child(10) { left: 85%; animation-delay: 6s;   animation-duration: 9s;  width: 3px; height: 3px; }
.jpm-embers i:nth-child(11) { left: 92%; animation-delay: 10s;  animation-duration: 12s; }
.jpm-embers i:nth-child(12) { left: 97%; animation-delay: 2.5s; animation-duration: 11s; width: 2px; height: 2px; }

/* ---------- body ---------- */
.jpm-panel {
    background: var(--jpm-panel); border: 1px solid var(--jpm-line); border-radius: 14px; padding: 20px 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.jpm-panel + .jpm-panel { margin-top: 16px; }
.jpm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.jpm-tile {
    background: var(--jpm-panel); border: 1px solid var(--jpm-line); border-radius: 14px; padding: 22px 20px;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.jpm-tile:hover { transform: translateY(-3px); border-color: #47474f; box-shadow: 0 14px 28px rgba(0,0,0,.4); }
.jpm-tile h3 { font-family: 'Lilita One', Inter, sans-serif; font-weight: 400; font-size: 1.25rem; margin: 14px 0 6px; letter-spacing: .3px; }
.jpm-tile p { margin: 0; color: var(--jpm-muted); font-size: .92rem; }
.jpm-tile a, .jpm-panel a:not(.btn) { color: var(--jpm-orange); font-weight: 600; }
.jpm-ring {
    width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(255,42,31,.10); border: 1px solid rgba(255,42,31,.35); color: var(--jpm-red); font-size: 1.35rem;
}
.jpm-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.jpm-pay-label { color: var(--jpm-muted); font-weight: 600; font-size: .9rem; }
.jpm-pay-note { margin-left: auto; color: var(--jpm-muted); font-size: .85rem; }
.jpm-payment-badge { border-radius: 10px; color: var(--jpm-text); font-weight: 600; background: var(--jpm-panel-2); }
.jpm-payment-badge .bi-paypal { color: #4ea0ff; }

/* sidebar */
.jpm-side-title { font-family: 'Lilita One', Inter, sans-serif; font-weight: 400; font-size: 1.2rem; margin: 0 0 12px; letter-spacing: .3px; display: flex; gap: 8px; align-items: center; }
.jpm-side-title .bi { color: var(--jpm-red); font-size: 1rem; }
.jpm-side-name { font-weight: 700; font-size: 1.05rem; }
.jpm-avatar { border-radius: 10px; object-fit: cover; }
.jpm-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jpm-recent li { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center; }
.jpm-recent li small { grid-column: 2; }
.jpm-recent-empty { display: block !important; color: var(--jpm-muted); text-align: center; padding: 10px; border: 1px dashed var(--jpm-line); border-radius: 10px; }
.jpm-progress { height: 10px; border-radius: 999px; background: var(--jpm-panel-2); }

/* package cards */
.jpm-cat-desc { margin-bottom: 20px; }
.jpm-package {
    height: 100%; display: flex; flex-direction: column; overflow: hidden;
    background: var(--jpm-panel); border: 1px solid var(--jpm-line); border-radius: 14px;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.jpm-package:hover { transform: translateY(-4px); border-color: rgba(255,42,31,.55); box-shadow: 0 0 0 4px rgba(255,42,31,.10), 0 16px 32px rgba(0,0,0,.45); }
.jpm-package-art { display: block; aspect-ratio: 16 / 10; background: #151518; overflow: hidden; }
.jpm-package-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.jpm-package:hover .jpm-package-art img { transform: scale(1.04); }
.jpm-package-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.jpm-package-name { font-family: 'Lilita One', Inter, sans-serif; font-weight: 400; font-size: 1.35rem; margin: 0; letter-spacing: .3px; }
.jpm-price { font-family: 'Lilita One', Inter, sans-serif; font-size: 1.5rem; color: var(--jpm-orange); margin: 0 0 6px; margin-top: auto; }
.jpm-price del { font-family: Inter, sans-serif; font-size: .95rem; color: var(--jpm-muted); margin-right: 6px; }
.jpm-empty { text-align: center; padding: 40px 20px; display: grid; justify-items: center; gap: 8px; }
.jpm-empty h2 { font-family: 'Lilita One', Inter, sans-serif; font-weight: 400; font-size: 1.6rem; margin: 8px 0 0; }

/* toast (copy feedback) */
.jpm-toast { position: fixed; left: 50%; bottom: 26px; z-index: 2000; transform: translate(-50%, 20px); opacity: 0; transition: .2s;
    background: var(--jpm-green); color: #07210f; font-weight: 700; padding: 10px 16px; border-radius: 10px; pointer-events: none; }
.jpm-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* motion */
.jpm-rise { animation: jpm-rise .6s ease-out both; }
.jpm-d1 { animation-delay: .1s; } .jpm-d2 { animation-delay: .18s; } .jpm-d3 { animation-delay: .26s; }
.jpm-d4 { animation-delay: .34s; } .jpm-d5 { animation-delay: .42s; }
@keyframes jpm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes jpm-pulse { 0% { box-shadow: 0 0 0 0 rgba(65,214,122,.6); } 70% { box-shadow: 0 0 0 8px rgba(65,214,122,0); } 100% { box-shadow: 0 0 0 0 rgba(65,214,122,0); } }
@keyframes jpm-drift { from { transform: scale(1.04) translateX(-1%); } to { transform: scale(1.10) translateX(1%); } }
@keyframes jpm-ember {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: .9; }
    50% { transform: translate(18px, -45vh); }
    85% { opacity: .5; }
    100% { transform: translate(-12px, -95vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .jpm-embers { display: none; }
    .jpm-rise, .jpm-hero::after, .jpm-dot.on { animation: none; }
    .jpm-tile, .jpm-package, .jpm-cat, .jpm-package-art img { transition: none; }
}

@media (max-width: 767.98px) {
    .jpm-tiles { grid-template-columns: 1fr; }
    .jpm-hero { padding: 44px 16px 26px; }
    .jpm-pill-status .jpm-addr { font-size: 17px; }
    .jpm-pay-note { margin-left: 0; }
}

/* ===== JustPvP.Me store: finishing touches (2026-10-01) =====
   Small additions on top of the home-page polish: header depth + ember hairline, a cart button that turns
   primary once it holds items, the main site's ghost-button and press/focus states, and rounded menus.
   Timings stay on the main site's .15s / .7s pop. */

/* header: keep sticky + visible, add depth and the ember hairline */
header.bg-body { box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.jpm-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,42,31,.6) 30%, rgba(255,138,92,.7) 50%, rgba(255,42,31,.6) 70%, transparent);
}
.jpm-header .navbar-nav .nav-link { border-radius: 10px; color: var(--jpm-muted); transition: color .15s, background .15s; }
.jpm-header .navbar-nav .nav-link:hover,
.jpm-header .navbar-nav .nav-link.show { color: var(--jpm-text); background: var(--jpm-panel-2); }
.jpm-header-logo { transition: transform .15s; }
.jpm-header-logo:hover { transform: translateY(-1px); }
.jpm-header-logo img { filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }

/* cart: ghost button when empty, primary button once it has items */
.jpm-cart-btn {
    min-height: 40px; box-shadow: inset 0 -3px 0 #111; font-weight: 700;
    transition: border-color .15s, transform .15s, box-shadow .15s, filter .15s;
}
.jpm-cart-btn:hover { border-color: var(--jpm-red); box-shadow: inset 0 -3px 0 #111, 0 0 0 4px rgba(255,42,31,.15); }
.jpm-cart-btn:has(.jpm-cart-badge) {
    color: #fff; border-color: transparent;
    background: linear-gradient(to bottom, var(--jpm-orange), var(--jpm-red) 55%); box-shadow: inset 0 -3px 0 var(--jpm-red-deep);
}
.jpm-cart-btn:has(.jpm-cart-badge):hover { color: #fff; filter: brightness(1.08); box-shadow: inset 0 -3px 0 var(--jpm-red-deep), 0 0 0 4px rgba(255,42,31,.15); }
.jpm-cart-badge { /* .tag from justpvp.me */
    background: var(--jpm-green); color: #07210f; padding: 3px 5px; box-shadow: 0 0 0 2px rgba(18,18,20,.85);
    animation: jpm-pop .7s cubic-bezier(.2,.9,.3,1.2) both;
}

/* buttons: press + focus states, ghost secondary like .btn.ghost */
.btn { transition: filter .15s, transform .15s, box-shadow .15s, border-color .15s, color .15s; }
.btn-primary:active, .jpm-cart-btn:active { transform: translateY(1px); }
.btn-primary:focus-visible { box-shadow: inset 0 -3px 0 var(--jpm-red-deep), 0 0 0 4px rgba(255,42,31,.3) !important; }
.btn-outline-primary {
    --bs-btn-hover-bg: var(--jpm-panel-2); --bs-btn-hover-border-color: var(--jpm-red);
    --bs-btn-active-bg: var(--jpm-panel-2); --bs-btn-active-border-color: var(--jpm-red); --bs-btn-active-color: #fff;
    box-shadow: inset 0 -3px 0 #111;
}
.btn-outline-primary .bi { color: var(--jpm-orange); }

/* menus */
.dropdown-menu { --bs-dropdown-link-hover-bg: var(--jpm-panel-2); --bs-dropdown-link-active-bg: var(--jpm-red); border-radius: 12px; padding: .35rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.dropdown-item { border-radius: 8px; transition: background .15s, color .15s; }

/* footer: matching hairline */
.footer { position: relative; }
.footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,42,31,.6) 30%, rgba(255,138,92,.7) 50%, rgba(255,42,31,.6) 70%, transparent);
}
.footer .footer-links li:not(:last-child) { border-bottom: 1px solid var(--jpm-line); }
.footer .footer-links a { color: var(--jpm-muted); font-weight: 600; transition: color .15s; }
.footer .footer-links a:hover { color: var(--jpm-text); }

@keyframes jpm-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .jpm-cart-badge { animation: none; }
    .jpm-cart-btn, .jpm-header-logo, .btn { transition: none; }
    .jpm-cart-btn:hover, .jpm-header-logo:hover, .btn-primary:active, .jpm-cart-btn:active { transform: none; }
}

/* ===== JustPvP.Me store: motion (2026-10-01) =====
   Same motion language as justpvp.me and the forum (borrowed from Nuvio): one curve, transform/opacity only,
   the browser drives scroll effects, hero art fades in once decoded, soft cross-fades between store pages. */
:root { --jpm-ease: cubic-bezier(.2, 0, 0, 1); }

/* page-to-page fades come from the shared navbar's transition (jpm-nav.css), on all three sites */

/* hero art: fades in once decoded (.jpm-bg-on from the hero script), own GPU layer */
.jpm-hero::after { opacity: 0; transition: opacity 1.2s ease; will-change: transform, opacity; backface-visibility: hidden; }
.jpm-hero.jpm-bg-on::after { opacity: 1; }
/* browser-driven parallax replaces the endless drift where supported */
@supports (animation-timeline: scroll()) {
    .jpm-hero::after { animation: jpm-hero-par linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    @keyframes jpm-hero-par { from { transform: translate3d(0, 0, 0) scale(1.04); } to { transform: translate3d(0, 4vh, 0) scale(1.16); } }
}

/* gentler entrances; "backwards" releases elements so hover/press transforms work afterwards */
.jpm-rise { animation: jpm-rise .55s var(--jpm-ease) backwards; }
@keyframes jpm-rise { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.jpm-embers i { will-change: transform, opacity; }

/* one curve for every hover, plus a small squeeze on press */
.btn, .jpm-cat, .jpm-pill-status, .jpm-tile, .jpm-package, .jpm-package-art img, .jpm-cart-btn, .jpm-header-logo,
.jpm-header .navbar-nav .nav-link, .jpm-topbar-link, .form-control, .form-select { transition-timing-function: var(--jpm-ease) !important; }
.jpm-tile, .jpm-package, .jpm-cat { transition-duration: .22s; }
.btn:active, .jpm-cat:active, .jpm-pill-status:active, .jpm-cart-btn:active { transform: scale(.97); }
.jpm-package:active { transform: scale(.99); }

/* menus open with a small scale-in */
.dropdown-menu.show { animation: jpm-menu .16s var(--jpm-ease) both; transform-origin: top; }
@keyframes jpm-menu { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* card depth: faint light top edge */
.jpm-panel, .jpm-tile, .jpm-package { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.25); }

/* scroll reveal (browser-driven; skipped where unsupported) */
@supports (animation-timeline: view()) {
    .jpm-store-body .jpm-tile, .jpm-store-body .jpm-panel, .jpm-store-body .jpm-package {
        animation: jpm-reveal linear backwards; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    @keyframes jpm-reveal { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
    .jpm-hero::after { animation: none; transition: none; opacity: 1; }
    .jpm-store-body .jpm-tile, .jpm-store-body .jpm-panel, .jpm-store-body .jpm-package, .dropdown-menu.show { animation: none; }
    .btn:active, .jpm-cat:active, .jpm-pill-status:active, .jpm-cart-btn:active, .jpm-package:active { transform: none; }
}

/* ===== JustPvP.Me store: shared navbar (2026-10-01) =====
   Generated from shared/jpm-nav.css by shared/inject.py - edit it there. */
/* JustPvP.Me network navbar - identical on all three sites (see jpm-nav.html). Self-contained: every rule is scoped to
   .jpm-nav and resets what Bootstrap (store) and Flarum (forum) would otherwise change. */
.jpm-nav {
  position: relative; z-index: 1040; box-sizing: border-box; width: 100%; margin: 0; padding: 0;
  background: rgba(18,18,20,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid #2e2e36; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
  font: 500 15px/1.2 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: #ececf1; text-align: left;
}
.jpm-nav *, .jpm-nav *::before, .jpm-nav *::after { box-sizing: border-box; }
.jpm-nav-in { max-width: 1120px; height: 62px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 22px; }
.jpm-nav a { text-decoration: none; }
.jpm-nav-brand { display: flex; align-items: center; flex: none; line-height: 0; }
.jpm-nav-brand img { display: block; width: auto; height: 40px; max-width: none; border: 0; }
.jpm-nav-links { display: flex; align-items: center; gap: 4px; margin: 0 0 0 auto; padding: 0; }
.jpm-nav-links a {
  display: block; padding: 8px 14px; border-radius: 10px; color: #9b9ba8; font-weight: 600; font-size: 15px; line-height: 1.2;
  transition: color .2s cubic-bezier(.2,0,0,1), background .2s cubic-bezier(.2,0,0,1), transform .2s cubic-bezier(.2,0,0,1);
}
.jpm-nav-links a:hover, .jpm-nav-links a:focus-visible { color: #ececf1; background: #222228; }
.jpm-nav-links a:active { transform: scale(.97); }
.jpm-nav[data-site=home] .jpm-nav-links a[data-k=home],
.jpm-nav[data-site=forum] .jpm-nav-links a[data-k=forum],
.jpm-nav[data-site=store] .jpm-nav-links a[data-k=store] {
  color: #fff; background: linear-gradient(to bottom, #ff8a5c, #ff2a1f 55%); box-shadow: inset 0 -2px 0 #b30f08;
}
.jpm-nav-play {
  flex: none; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(27,27,31,.7); color: #ececf1;
  font: 600 13px/1 Inter, system-ui, sans-serif;
  transition: border-color .2s cubic-bezier(.2,0,0,1), background .2s cubic-bezier(.2,0,0,1), transform .2s cubic-bezier(.2,0,0,1);
}
.jpm-nav-play:hover, .jpm-nav-play:focus-visible { border-color: rgba(255,42,31,.7); background: rgba(34,34,40,.9); outline: none; }
.jpm-nav-play:active { transform: scale(.97); }
.jpm-nav-dot { width: 8px; height: 8px; border-radius: 50%; background: #6e6e7a; display: inline-block; flex: none; }
.jpm-nav-dot.on { background: #41d67a; box-shadow: 0 0 0 0 rgba(65,214,122,.6); animation: jpm-nav-pulse 2s infinite; }
.jpm-nav-dot.off { background: #ff2a1f; }
.jpm-nav-count { color: #c9c9d3; }
.jpm-nav-sep { color: rgba(255,255,255,.3); }
.jpm-nav-addr { font: 400 16px/1 "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif; letter-spacing: .3px; color: #fff; }
.jpm-nav-copy { width: 15px; height: 15px; fill: none; stroke: #ff8a5c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes jpm-nav-pulse { 70% { box-shadow: 0 0 0 7px rgba(65,214,122,0); } 100% { box-shadow: 0 0 0 0 rgba(65,214,122,0); } }
@media (max-width: 860px) {
  .jpm-nav-in { gap: 12px; padding: 0 14px; }
  .jpm-nav-count, .jpm-nav-sep { display: none; }
}
@media (max-width: 640px) {
  .jpm-nav-in { height: 54px; }
  .jpm-nav-brand img { height: 32px; }
  .jpm-nav-links a { padding: 7px 9px; font-size: 13px; }
  .jpm-nav-links a[data-k=discord], .jpm-nav-play { display: none; }
}
/* Page transitions (all three sites): a background-coloured veil under the navbar fades out as a page arrives, and
   fades back in (html.jpm-leaving, set by jpm-nav.js) just before leaving for another JustPvP.Me page. */
.jpm-nav { isolation: isolate; }
html::after {
  content: ""; position: fixed; inset: 0; z-index: 1029; pointer-events: none; background: #121214;
  animation: jpm-page-in .42s cubic-bezier(.2,0,0,1) .04s both;
}
html.jpm-leaving::after { animation: jpm-page-out .19s cubic-bezier(.4,0,1,1) both; }
@keyframes jpm-page-in { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes jpm-page-out { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .jpm-nav-dot.on { animation: none; } .jpm-nav * { transition: none !important; }
  html::after { animation: none; opacity: 0; visibility: hidden; }
}