/* Infinitus Passport (js/passport.js). Navy leather + gold foil, twelve realm pages. Prefix .pp- */

/* the track scrolls inside the content column instead of widening the page */
.store-shell, .store-shell .store-content, #passportSection { min-width: 0; }
.pp-root {
    min-width: 0;
    max-width: 100%;
    --pp-navy: #0b1431;
    --pp-navy-2: #16244d;
    --pp-gold: #f2c75a;
    --pp-gold-hi: #fff2b8;
    --pp-gold-lo: #b8862a;
    --pp-blue: #6f97ff;
    --pp-ink: #e9eefc;
    --pp-dim: rgba(233, 238, 252, 0.6);
    color: var(--pp-ink);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.pp-loading, .pp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 320px;
    color: var(--pp-dim);
    text-align: center;
}
.pp-loading i { font-size: 2.6rem; color: var(--pp-gold); animation: pp-pulse 1.2s ease-in-out infinite; }
.pp-empty-cover { width: 160px; }
.pp-empty-cover img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* ── hero ── */
.pp-hero {
    position: relative;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 22px;
    padding: 20px 22px;
    border-radius: 18px;
    background:
        radial-gradient(120% 140% at 85% 20%, rgba(58, 108, 255, 0.28), transparent 60%),
        linear-gradient(135deg, var(--pp-navy-2), var(--pp-navy) 60%, #060a1c);
    border: 1px solid rgba(242, 199, 90, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 14px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.pp-hero::after {
    /* the current realm's planet as a faint watermark */
    content: '';
    position: absolute;
    right: -60px;
    top: -40px;
    width: 300px;
    height: 300px;
    background: var(--realm-img) center / contain no-repeat;
    opacity: 0.16;
    pointer-events: none;
    filter: saturate(1.2);
}
.pp-cover { position: relative; z-index: 1; align-self: center; filter: drop-shadow(0 10px 22px rgba(58, 108, 255, 0.35)); }
.pp-cover img { width: 100%; height: auto; display: block; border-radius: 8px; }

.pp-hero-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--pp-gold);
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(242, 199, 90, 0.3);
}
.pp-kicker img { width: 22px; height: 22px; object-fit: contain; }
.pp-title {
    margin: 0;
    font-family: 'DragonSlayer', 'HwyGothic', serif;
    font-weight: normal;
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    letter-spacing: 2px;
    line-height: 1.05;
    background: linear-gradient(180deg, var(--pp-gold-hi), var(--pp-gold) 45%, var(--pp-gold-lo));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pp-desc { margin: 0; color: var(--pp-dim); font-size: 0.9rem; line-height: 1.4; }

.pp-level-row { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.pp-level-badge {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #2b4ea8, #0e1a45 70%);
    border: 2px solid var(--pp-gold);
    box-shadow: 0 0 0 4px rgba(242, 199, 90, 0.12), 0 0 22px rgba(58, 108, 255, 0.45);
    font-family: 'HwyGothic', Arial, sans-serif;
    line-height: 1;
}
.pp-level-badge span { font-size: 0.55rem; letter-spacing: 2px; color: var(--pp-gold); }
.pp-level-badge b { font-size: 1.9rem; color: #fff; }
.pp-level-badge em { font-style: normal; font-size: 0.6rem; color: var(--pp-dim); }

.pp-xp { flex: 1; min-width: 0; }
.pp-xp-bar {
    height: 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(242, 199, 90, 0.35);
    overflow: hidden;
}
.pp-xp-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3a6cff, #8fb0ff 60%, var(--pp-gold-hi));
    box-shadow: 0 0 12px rgba(111, 151, 255, 0.8);
    transition: width 0.8s cubic-bezier(.2, .8, .2, 1);
}
.pp-xp-text {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.8rem;
}
.pp-xp-hint { color: var(--pp-dim); }

.pp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.pp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.2s, filter 0.2s;
}
.pp-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.pp-btn:focus { outline: none; }
.pp-btn:focus-visible { outline: 2px solid #fff2b8; outline-offset: 2px; }
.pp-btn-claim, .pp-btn-claim:focus, .pp-btn-claim:active {
    color: #1b1404;
    background: linear-gradient(180deg, #fff2b8, #f2c75a 50%, #d9a535);
    box-shadow: 0 0 0 0 rgba(242, 199, 90, 0.6);
    animation: pp-glow 1.8s ease-in-out infinite;
}
.pp-btn-buy {
    color: #fff;
    background: linear-gradient(180deg, #4f7dff, #2a4fd1);
    border-color: rgba(242, 199, 90, 0.6);
    box-shadow: 0 6px 18px rgba(42, 79, 209, 0.45);
}
.pp-btn-buy i { color: var(--pp-gold-hi); }
.pp-btn-ghost { color: var(--pp-ink); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.pp-owned, .pp-bonus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 1px;
}
.pp-owned { color: var(--pp-gold); background: rgba(242, 199, 90, 0.12); border: 1px solid rgba(242, 199, 90, 0.45); }
.pp-bonus { color: #9fd0ff; background: rgba(111, 151, 255, 0.12); border: 1px solid rgba(111, 151, 255, 0.35); }
.pp-waiting {
    margin: 0;
    font-size: 0.8rem;
    color: var(--pp-gold);
    cursor: pointer;
}
.pp-waiting i { margin-right: 6px; }

/* ── realm chips ── */
.pp-realms {
    scrollbar-color: rgba(242, 199, 90, 0.4) transparent;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: thin;
}
.pp-realm-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: var(--pp-dim);
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1px;
    cursor: pointer;
}
.pp-realm-chip img { width: 24px; height: 24px; object-fit: contain; filter: grayscale(1) brightness(0.7); }
.pp-realm-chip.reached { color: var(--pp-ink); border-color: rgba(242, 199, 90, 0.3); }
.pp-realm-chip.reached img { filter: none; }
.pp-realm-chip.current { background: rgba(242, 199, 90, 0.14); border-color: var(--pp-gold); color: var(--pp-gold); }

/* ── track ── */
.pp-track-wrap { position: relative; }
.pp-track-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pp-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: var(--pp-ink);
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 1px;
    cursor: pointer;
}
.pp-jump:hover { border-color: var(--pp-gold); color: var(--pp-gold); }
.pp-legend { margin-left: auto; display: flex; gap: 12px; font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; }
.pp-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.pp-legend .free { color: #9fb8ff; }
.pp-legend .free::before { background: #6f97ff; }
.pp-legend .premium { color: var(--pp-gold); }
.pp-legend .premium::before { background: var(--pp-gold); }

.pp-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px 4px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(242, 199, 90, 0.4) transparent;
}
.pp-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(242, 199, 90, 0.5);
    background: rgba(11, 20, 49, 0.92);
    color: var(--pp-gold);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.pp-arrow.left { left: 4px; }
.pp-arrow.right { right: 4px; }

/* one passport page per realm */
.pp-page {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(22, 36, 77, 0.75), rgba(8, 13, 32, 0.9));
    border: 1px solid rgba(242, 199, 90, 0.18);
    overflow: hidden;
}
.pp-page::before {
    content: '';
    position: absolute;
    inset: 30px 0 0;
    background: var(--planet) center / 70% no-repeat;
    opacity: 0.07;
    pointer-events: none;
}
.pp-page-head {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 4px 8px;
    border-bottom: 1px dashed rgba(242, 199, 90, 0.25);
    margin-bottom: 10px;
}
.pp-page-head span { font-family: 'DragonSlayer', 'HwyGothic', serif; font-size: 1.05rem; letter-spacing: 2px; color: var(--pp-gold); }
.pp-page-head em { font-style: normal; font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.65rem; color: var(--pp-dim); letter-spacing: 1px; }
.pp-page-cols { position: relative; display: flex; gap: 8px; }

.pp-col { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 104px; }
.pp-lvl {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}
.pp-lvl::before {
    /* the progress rail between the two stamps */
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.1);
}
.pp-col.reached .pp-lvl::before { background: linear-gradient(90deg, #3a6cff, #8fb0ff); box-shadow: 0 0 8px rgba(111, 151, 255, 0.7); }
.pp-lvl span {
    position: relative;
    min-width: 30px;
    padding: 3px 6px;
    border-radius: 999px;
    text-align: center;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.75rem;
    background: #101a3a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--pp-dim);
}
.pp-col.reached .pp-lvl span { color: #fff; border-color: rgba(111, 151, 255, 0.7); }
.pp-col.current .pp-lvl span { background: var(--pp-gold); color: #1b1404; border-color: var(--pp-gold-hi); box-shadow: 0 0 12px rgba(242, 199, 90, 0.8); }
.pp-col.pp-flash { animation: pp-flash 1s ease-out; }

/* a reward stamp */
.pp-stamp {
    position: relative;
    width: 100%;
    height: 118px;
    padding: 6px 6px 22px;
    border-radius: 10px;
    border: 1.5px solid rgba(111, 151, 255, 0.35);
    background: rgba(10, 16, 40, 0.75);
    color: var(--pp-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    font: inherit;
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}
button.pp-stamp:hover { transform: translateY(-2px); }
.pp-stamp.premium {
    border-color: rgba(242, 199, 90, 0.45);
    background: linear-gradient(180deg, rgba(60, 44, 12, 0.55), rgba(10, 16, 40, 0.85));
}
.pp-stamp.s-empty { border-style: dashed; border-color: rgba(255, 255, 255, 0.07); background: transparent; cursor: default; }
.pp-stamp-art { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; }
.pp-stamp-art img { max-width: 100%; max-height: 68px; object-fit: contain; border-radius: 4px; }
.pp-stamp-art img.skin { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }
.pp-stamp-art > i { font-size: 1.8rem; color: var(--pp-gold); }
.pp-more {
    position: absolute;
    right: 0;
    top: 0;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-family: 'HwyGothic', Arial, sans-serif;
    background: var(--pp-gold);
    color: #1b1404;
}
.pp-stamp-label {
    max-width: 100%;
    font-size: 0.68rem;
    font-family: 'HwyGothic', Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pp-dim);
}
.pp-stamp-state {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 0 0 9px 9px;
}
/* treasure: the site-wide gem glyph (same as .gem-ico in main.css) */
.pp-gem-big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(77, 210, 255, 0.6));
}
.pp-gem-big::before { content: '\1F48E'; }
.pp-items .pp-gem-big { font-size: 1.5rem; width: 40px; }

/* stamp states */
.pp-stamp.s-locked { opacity: 0.55; }
.pp-stamp.s-locked .pp-stamp-art img { filter: grayscale(0.7) brightness(0.75); }
.pp-stamp.s-premium_locked .pp-stamp-art img { filter: grayscale(0.4) brightness(0.8); }
.pp-stamp.s-premium_locked .pp-stamp-state, .pp-stamp.premium.s-locked .pp-stamp-state { color: var(--pp-gold); }
.pp-stamp.s-claimable {
    border-color: var(--pp-gold);
    box-shadow: 0 0 0 1px rgba(242, 199, 90, 0.4), 0 0 18px rgba(242, 199, 90, 0.45);
    animation: pp-glow 1.8s ease-in-out infinite;
}
.pp-stamp.s-claimable .pp-stamp-state { background: var(--pp-gold); color: #1b1404; }
.pp-stamp.s-claimed .pp-stamp-art { opacity: 0.45; }
.pp-stamp.s-claimed::after {
    /* an ink "stamped" mark across claimed rewards */
    content: '';
    position: absolute;
    inset: 18px 14px 28px;
    border: 1.5px dashed rgba(95, 227, 106, 0.55);
    border-radius: 50%;
    transform: rotate(-14deg);
    pointer-events: none;
}
.pp-stamp.s-claimed .pp-stamp-state { color: #5fe36a; }

/* ── modals ── */
.pp-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 4, 12, 0.72);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.2s;
}
.pp-modal-overlay.visible { opacity: 1; }
.pp-modal {
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 24px 22px 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, #16244d, #0b1431 70%);
    border: 1px solid rgba(242, 199, 90, 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(58, 108, 255, 0.25);
    color: #e9eefc;
    text-align: center;
    transform: translateY(10px) scale(0.98);
    transition: transform 0.25s cubic-bezier(.2, .8, .2, 1);
}
.pp-modal-overlay.visible .pp-modal { transform: none; }
.pp-modal h3 {
    margin: 6px 0 12px;
    font-family: 'DragonSlayer', 'HwyGothic', serif;
    font-weight: normal;
    font-size: 1.6rem;
    letter-spacing: 2px;
    color: #f2c75a;
}
.pp-items { display: flex; flex-direction: column; gap: 6px; text-align: left; margin: 10px 0; }
.pp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.85rem;
}
.pp-item img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; }
.pp-item span:not(.pp-gem-big) { flex: 1; }
.pp-item em { font-style: normal; font-size: 0.6rem; letter-spacing: 1.5px; color: rgba(233, 238, 252, 0.6); }
.pp-item em.r-rare { color: #4dd2ff; }
.pp-item em.r-epic { color: #c77dff; }
.pp-item em.r-ancient { color: #ff9a3c; }
.pp-modal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.pp-stamp-burst {
    width: 74px;
    height: 74px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #1b1404;
    background: radial-gradient(circle at 35% 30%, #fff2b8, #f2c75a 55%, #b8862a);
    box-shadow: 0 0 0 6px rgba(242, 199, 90, 0.18), 0 0 40px rgba(242, 199, 90, 0.6);
    animation: pp-stamp-in 0.5s cubic-bezier(.2, 1.6, .4, 1);
}
.pp-detail-head { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: 'HwyGothic', Arial, sans-serif; letter-spacing: 1px; }
.pp-detail-note { font-size: 0.8rem; color: rgba(233, 238, 252, 0.65); margin: 0; }
.pp-lane-tag { font-family: 'HwyGothic', Arial, sans-serif; font-size: 0.65rem; letter-spacing: 2px; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; }
.pp-lane-tag.free { color: #9fb8ff; background: rgba(111, 151, 255, 0.15); }
.pp-lane-tag.premium { color: #f2c75a; background: rgba(242, 199, 90, 0.15); }
.pp-buy-cover { width: 120px; margin: 0 auto; filter: drop-shadow(0 10px 22px rgba(58, 108, 255, 0.4)); }
.pp-buy-cover img { width: 100%; height: auto; display: block; border-radius: 6px; }
.pp-buy-preview { margin: 4px 0 8px; }
.pp-perks { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.pp-perks li { display: flex; gap: 10px; align-items: center; font-size: 0.88rem; }
.pp-perks li i { width: 18px; color: #f2c75a; }
.pp-perks li.hot { color: #f2c75a; }
.pp-unavailable { font-size: 0.8rem; color: rgba(233, 238, 252, 0.6); align-self: center; }

.pp-flash-msg {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 2100;
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    padding: 10px 18px;
    border-radius: 10px;
    background: #4a1b1b;
    border: 1px solid rgba(255, 90, 90, 0.6);
    color: #fff;
    font-size: 0.85rem;
    transition: opacity 0.2s, transform 0.2s;
}
.pp-flash-msg.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes pp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes pp-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(242, 199, 90, 0.4), 0 0 10px rgba(242, 199, 90, 0.3); }
    50% { box-shadow: 0 0 0 1px rgba(242, 199, 90, 0.7), 0 0 24px rgba(242, 199, 90, 0.65); }
}
@keyframes pp-flash { 0% { background: rgba(242, 199, 90, 0.35); border-radius: 12px; } 100% { background: transparent; } }
@keyframes pp-stamp-in { 0% { transform: scale(2.2) rotate(-25deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .pp-btn-claim, .pp-stamp.s-claimable, .pp-loading i { animation: none; }
}

/* ── phones: the track runs top to bottom, one row per level ── */
@media (max-width: 767px) {
    .pp-hero { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 12px; }
    .pp-cover { width: 120px; margin: 0 auto; }
    .pp-kicker { align-self: center; }
    .pp-title { text-align: center; }
    .pp-desc { text-align: center; }
    .pp-level-badge { width: 66px; height: 66px; }
    .pp-level-badge b { font-size: 1.5rem; }
    .pp-actions { justify-content: center; }
    .pp-btn { flex: 1 1 auto; justify-content: center; }
    .pp-arrow { display: none; }
    .pp-legend { margin-left: 0; }
    .pp-track { flex-direction: column; overflow-x: visible; scroll-snap-type: none; padding: 0; }
    .pp-page { width: auto; }
    .pp-page-cols { flex-direction: column; gap: 6px; }
    .pp-col { width: auto; flex-direction: row; align-items: stretch; }
    .pp-col .pp-stamp { flex: 1; height: 88px; flex-direction: row; padding: 6px 8px 6px 6px; }
    .pp-col .pp-stamp-art { flex: 0 0 64px; }
    .pp-col .pp-stamp-art img { max-height: 60px; }
    .pp-col .pp-stamp-label { flex: 1; white-space: normal; text-align: left; }
    .pp-col .pp-stamp-state { position: static; height: auto; width: auto; padding: 3px 6px; border-radius: 6px; }
    .pp-lvl { flex: 0 0 40px; width: 40px; align-items: center; }
    .pp-lvl::before { left: 50%; right: auto; top: -6px; bottom: -6px; width: 4px; height: auto; margin: 0 0 0 -2px; }
    .pp-stamp.s-claimed::after { inset: 10px 30% 10px 8px; }
}

/* ── the Passport's rail item on /skins ── */
.store-nav-item.store-nav-passport {
    position: relative;
    color: #f2c75a;
    border: 1px solid rgba(242, 199, 90, 0.3);
    background: linear-gradient(90deg, rgba(58, 108, 255, 0.16), rgba(242, 199, 90, 0.08));
}
.store-nav-item.store-nav-passport i { color: #f2c75a; }
.store-nav-item.store-nav-passport.active { border-color: #f2c75a; }
.store-nav-dot {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 0 2px rgba(11, 20, 49, 0.9), 0 0 8px rgba(255, 77, 77, 0.8);
}
.store-nav-dot[hidden] { display: none; }

/* Phones/tablets: the skins shell stacks with align-items:flex-start, which would shrink-wrap the
   content column to the track's full width. Stretch it while the Passport is the open tab. */
@media only screen and (max-width: 1024px), only screen and (hover: none) {
    .store-shell .store-content:has(> #passportSection:not([style*="none"])) { align-self: stretch; width: 100%; }
}

/* ── one nav row: jump buttons · realm chips · legend ── */
.pp-nav-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-jumps { display: flex; gap: 6px; flex-shrink: 0; }
.pp-nav-row .pp-realms { flex: 1 1 auto; min-width: 0; padding-bottom: 4px; }
.pp-nav-row .pp-legend { margin-left: 0; flex-shrink: 0; }
.pp-actions .pp-waiting { font-size: 0.78rem; }

/* Desktop: compact enough that hero + realms + both reward rows fit a maximized 1080p window
   (about 900px of viewport under the browser bars) without scrolling. */
@media only screen and (min-width: 768px) {
    .pp-root { gap: 10px; }
    .pp-hero { grid-template-columns: 130px minmax(0, 1fr); gap: 18px; padding: 14px 18px; }
    .pp-hero-body { gap: 6px; }
    .pp-kicker { padding: 2px 10px 2px 3px; font-size: 0.65rem; }
    .pp-kicker img { width: 18px; height: 18px; }
    .pp-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
    .pp-desc { font-size: 0.82rem; }
    .pp-level-row { margin-top: 2px; }
    .pp-level-badge { width: 68px; height: 68px; }
    .pp-level-badge b { font-size: 1.55rem; }
    .pp-btn { padding: 8px 16px; }
    .pp-page { padding: 8px 8px 10px; }
    .pp-page-head { padding-bottom: 6px; margin-bottom: 8px; }
    .pp-stamp { height: 104px; }
    .pp-stamp-art img { max-height: 58px; }
    .pp-track { padding-bottom: 8px; }
}

/* Phones: the nav row wraps, chips get their own full-width line */
@media only screen and (max-width: 767px) {
    .pp-nav-row { flex-wrap: wrap; }
    .pp-nav-row .pp-realms { order: 3; flex-basis: 100%; }
}

/* Desktop shell (sidebar beside content): keep the Passport off the left-nav panel */
@media only screen and (min-width: 1025px) and (hover: hover) {
    /* same 16px the left-nav panel keeps from the title bar (its margin-top) */
    #passportSection { padding-left: 16px; padding-top: 16px; }
}

/* Hover-glide arrows (js startGlide); snapping is off while gliding so the slow scroll is not fought */

@media only screen and (min-width: 768px) {
    .pp-arrow { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
    .pp-arrow:hover { transform: scale(1.1); box-shadow: 0 0 16px rgba(242, 199, 90, 0.55); }
}

/* ── realm slider (js bindScrubber): a row of realms to click, a glow on it that mirrors the
   handle, and directly below a rail with the gold handle. Both shine on the same beat. ── */
.pp-scrubber { display: flex; flex-direction: column; gap: 4px; margin-top: 0; user-select: none; }
.pp-scrub-segs {
    position: relative;
    display: flex;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(8, 13, 32, 0.95), rgba(22, 36, 77, 0.85));
    border: 1px solid rgba(242, 199, 90, 0.3);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.pp-scrub-seg {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
    border: none;
    border-right: 1px solid rgba(242, 199, 90, 0.14);
    background: transparent;
    color: rgba(233, 238, 252, 0.4);
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.64rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.pp-scrub-seg:last-child { border-right: none; }
.pp-scrub-seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-scrub-seg img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; filter: grayscale(1) brightness(0.6); transition: filter 0.2s, transform 0.2s; }
.pp-scrub-seg:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.pp-scrub-seg:hover img { transform: scale(1.18); }
.pp-scrub-seg.reached { color: rgba(233, 238, 252, 0.85); }
.pp-scrub-seg.reached img { filter: none; }
.pp-scrub-seg.current { color: #f2c75a; }
.pp-scrub-seg.current img { filter: drop-shadow(0 0 6px rgba(242, 199, 90, 0.8)); }

/* the view's reflection on the planet row: never takes clicks */
.pp-scrub-glow {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 242, 184, 0.16), rgba(242, 199, 90, 0.08));
    box-shadow: inset 0 0 0 1px rgba(242, 199, 90, 0.55), inset 0 0 18px rgba(242, 199, 90, 0.25);
    overflow: hidden;
}

/* the rail and its handle */
.pp-scrub-rail {
    position: relative;
    height: 30px; /* same as the planet row above it */
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(242, 199, 90, 0.2);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}
.pp-scrub-thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff2b8, #f2c75a 45%, #b8862a);
    box-shadow: 0 0 12px rgba(242, 199, 90, 0.6);
    cursor: grab;
    touch-action: none;
    overflow: hidden;
    transition: box-shadow 0.2s, filter 0.2s;
}
.pp-scrub-thumb:hover { filter: brightness(1.1); box-shadow: 0 0 18px rgba(242, 199, 90, 0.85); }
.pp-scrubber.dragging .pp-scrub-thumb { cursor: grabbing; filter: brightness(1.15); }

/* the shine: one sweep across the handle and the same sweep across its reflection */
.pp-scrub-glow::after, .pp-scrub-thumb::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: pp-shine 2.8s ease-in-out infinite;
}
.pp-scrub-glow::after { background: linear-gradient(100deg, transparent, rgba(255, 242, 184, 0.35), transparent); }
@keyframes pp-shine { 0% { left: -40%; } 60%, 100% { left: 110%; } }
@media (prefers-reduced-motion: reduce) { .pp-scrub-glow::after, .pp-scrub-thumb::after { animation: none; display: none; } }

/* Desktop: the slider replaces both the native scrollbar and the realm chips */
@media only screen and (min-width: 768px) {
    .pp-track { scrollbar-width: none; padding-bottom: 2px; scroll-snap-type: none; }
    .pp-track::-webkit-scrollbar { display: none; }
    .pp-nav-row .pp-realms { display: none; }
    .pp-nav-row { justify-content: space-between; }
}
/* Phones: the track runs down the page, so no slider; the chips stay for jumping between realms */
@media only screen and (max-width: 767px) {
    .pp-scrubber { display: none; }
}

/* ── hero action panel (claim / unlock premium / bonus), right of the level + XP ── */
.pp-cta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(6, 10, 28, 0.55);
    border: 1px solid rgba(242, 199, 90, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(2px);
}
.pp-cta .pp-btn { justify-content: center; width: 100%; padding: 11px 16px; font-size: 0.9rem; }
.pp-cta .pp-owned, .pp-cta .pp-bonus { justify-content: center; }
.pp-cta .pp-waiting { text-align: center; line-height: 1.35; font-size: 0.78rem; }
.pp-cta .pp-waiting i { margin-right: 5px; }

@media only screen and (min-width: 768px) {
    .pp-hero { grid-template-columns: 130px minmax(0, 1fr) minmax(250px, 300px); align-items: center; }
    .pp-hero-body { gap: 8px; }
}
@media only screen and (max-width: 767px) {
    .pp-cta { padding: 12px; }
}
.pp-btn-buy .pp-buy-label { white-space: nowrap; }
.pp-btn-buy .pp-price {
    margin-left: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 242, 184, 0.95);
    color: #1b2a6b;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Short desktop screens (e.g. 1366x768): slimmer reward cards so the slider stays on screen */
@media only screen and (min-width: 768px) and (max-height: 820px) {
    .pp-stamp { height: 90px; }
    .pp-stamp-art img { max-height: 48px; }
    .pp-scrub-segs, .pp-scrub-rail { height: 26px; }
    .pp-hero { padding-top: 12px; padding-bottom: 12px; }
}