/* ─── הפרופיל שלי ──────────────────────────────────────────────────────────── */
.pf-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 22px 16px 70px;
    direction: rtl;
    font-family: 'Heebo', 'Segoe UI', sans-serif;
    position: relative;
    z-index: 1;
}

/* ── Aurora behind the page ── */
.pf-aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pf-aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .5;
    animation: pfDrift 22s ease-in-out infinite alternate;
}

.pf-aurora-blob--1 { width: 55vw; height: 55vw; background: #c7d2fe; top: -18vw; right: -14vw; }
.pf-aurora-blob--2 { width: 46vw; height: 46vw; background: #fbcfe8; bottom: -16vw; left: -10vw; animation-delay: -8s; }
.pf-aurora-blob--3 { width: 38vw; height: 38vw; background: #a5f3fc; top: 45%; left: 35%; animation-delay: -15s; }

@keyframes pfDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(5vw, 4vw) scale(1.1); } }

/* ── Player card ── */
.pf-card {
    border-radius: 32px;
    padding: 6px;
    color: #fff;
    box-shadow: 0 30px 70px rgba(15,23,42,.28), 0 0 0 1px rgba(255,255,255,.25) inset;
    position: relative;
    overflow: hidden;
    animation: pfIn .6s cubic-bezier(.34,1.4,.64,1);
}

    .pf-card--light { color: #0f172a; }

/* One shine sweep when the card appears */
.pf-shine {
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-18deg);
    animation: pfShine 1.6s .4s ease-out forwards;
    pointer-events: none;
    z-index: 3;
}

@keyframes pfShine { to { left: 130%; } }

.pf-card-inner {
    position: relative;
    z-index: 2;
    border-radius: 27px;
    background: rgba(0,0,0,.26);
    backdrop-filter: blur(6px);
    padding: 30px 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

    .pf-card--light .pf-card-inner { background: rgba(255,255,255,.5); }

/* Effects layer (particles) sits between the background and the content */
.pf-fx { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; border-radius: inherit; }

.pf-p { position: absolute; line-height: 1; will-change: transform, opacity; opacity: 0; user-select: none; }
.pf-p--rise    { animation: pfRise linear infinite; }
.pf-p--fall    { animation: pfFall linear infinite; }
.pf-p--twinkle { animation: pfTwinkle ease-in-out infinite; }
.pf-p--flutter { animation: pfFlutter ease-in-out infinite; }
.pf-p--firefly { animation: pfFirefly ease-in-out infinite; text-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }

@keyframes pfRise    { 0% { transform: translate(0, 40px) scale(.7); opacity: 0; } 15% { opacity: .95; } 85% { opacity: .9; } 100% { transform: translate(var(--sway), -110%) scale(1.1); opacity: 0; } }
@keyframes pfFall    { 0% { transform: translate(0, -40px) rotate(0deg); opacity: 0; } 12% { opacity: .95; } 88% { opacity: .9; } 100% { transform: translate(var(--sway), 110%) rotate(340deg); opacity: 0; } }
@keyframes pfTwinkle { 0%, 100% { transform: scale(.4) rotate(0deg); opacity: 0; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }
@keyframes pfFlutter { 0% { transform: translate(-30%, 0) rotate(-8deg); opacity: 0; } 10% { opacity: 1; } 25% { transform: translate(-10%, -18px) rotate(10deg); } 50% { transform: translate(10%, 6px) rotate(-8deg); } 75% { transform: translate(28%, -14px) rotate(10deg); } 90% { opacity: 1; } 100% { transform: translate(50%, 0) rotate(-6deg); opacity: 0; } }
@keyframes pfFirefly { 0%, 100% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 50% { transform: translate(var(--sway), -14px); opacity: .4; } 70% { opacity: 1; } }

/* Avatar with a pulsing aura in its own colours */
.pf-avatar-stage { position: relative; width: 136px; height: 136px; display: flex; align-items: center; justify-content: center; margin-top: 6px; }
.pf-aura {
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    filter: blur(22px);
    opacity: .75;
    animation: pfAura 3.2s ease-in-out infinite;
}

@keyframes pfAura { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.08); opacity: .9; } }

.pf-avatar-big { position: relative; width: 136px; height: 136px; display: flex; align-items: center; justify-content: center; animation: pfFloat 4s ease-in-out infinite; }
    .pf-avatar-big .pf-av { box-shadow: 0 14px 34px rgba(0,0,0,.4); }
    .pf-avatar-big .av-frame::before { inset: -7px; }
    .pf-avatar-big .av-frame::after { font-size: 1.15rem; }

@keyframes pfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.pf-identity { text-align: center; }
.pf-name { font-size: 2.3rem; font-weight: 900; text-shadow: 0 3px 14px rgba(0,0,0,.4); letter-spacing: -.5px; }
.pf-card--light .pf-name { text-shadow: none; }
.pf-rank-badge {
    display: inline-block;
    margin-top: 6px;
    background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.12));
    border: 1.5px solid rgba(255,255,255,.5);
    border-radius: 999px;
    padding: 5px 16px;
    font-weight: 900;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

.pf-card--light .pf-rank-badge { background: rgba(15,23,42,.08); border-color: rgba(15,23,42,.2); box-shadow: none; }

.pf-stats-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.pf-stat {
    flex: 1 1 120px;
    max-width: 180px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 18px;
    padding: 12px 12px;
    text-align: center;
    backdrop-filter: blur(4px);
    transition: transform .15s, background .15s;
}

    .pf-stat:hover { transform: translateY(-3px); background: rgba(255,255,255,.22); }
    .pf-card--light .pf-stat { background: rgba(255,255,255,.65); border-color: rgba(15,23,42,.12); }

.pf-stat-val { font-size: 1.6rem; font-weight: 900; }
.pf-stat-lbl { font-size: .8rem; opacity: .9; font-weight: 700; }

.pf-card-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.pf-btn {
    font-family: inherit;
    font-size: .95rem;
    font-weight: 800;
    border-radius: 12px;
    padding: 9px 16px;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform .12s, background .15s;
}

    .pf-btn:hover { transform: translateY(-1px); }

.pf-btn--ghost { background: rgba(255,255,255,.16); color: inherit; border-color: rgba(255,255,255,.45); }
.pf-card--light .pf-btn--ghost { background: rgba(255,255,255,.75); border-color: rgba(15,23,42,.2); }

/* ── Sections ── */
.pf-section { margin-top: 30px; }
.pf-reveal { animation: pfIn .6s .15s cubic-bezier(.34,1.2,.64,1) both; }
.pf-reveal + .pf-reveal { animation-delay: .3s; }

.pf-h2 {
    font-size: 1.45rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .pf-h2::after { content: ''; flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(124,58,237,.35), transparent); }

.pf-h2-ico { font-size: 1.5rem; }

.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pf-tile {
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 16px 12px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(15,23,42,.07);
    transition: transform .15s, box-shadow .15s;
}

    .pf-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,23,42,.12); }

.pf-tile-ico { font-size: 1.5rem; margin-bottom: 4px; }
.pf-tile-val { font-size: 1.5rem; font-weight: 900; color: #1e293b; }
.pf-tile-lbl { font-size: .82rem; color: #64748b; font-weight: 700; margin-top: 2px; }

/* ── Shop ── */
.pf-shop-hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .pf-shop-hdr .pf-h2 { flex: 1; }
.pf-shop-coins {
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    color: #78350f;
    border-radius: 999px;
    padding: 7px 18px;
    font-weight: 900;
    box-shadow: 0 6px 18px rgba(245,158,11,.4);
    animation: pfCoinPulse 2.6s ease-in-out infinite;
}

@keyframes pfCoinPulse { 0%, 100% { box-shadow: 0 6px 18px rgba(245,158,11,.4); } 50% { box-shadow: 0 8px 26px rgba(245,158,11,.7); } }

.pf-shop-sub { color: #475569; font-size: .92rem; margin: 4px 0 12px; }

.pf-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pf-tab {
    font-family: inherit;
    font-size: .95rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 9px 18px;
    border: 1.5px solid #e2e8f0;
    background: rgba(255,255,255,.9);
    color: #334155;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
}

    .pf-tab:hover { transform: translateY(-1px); }
    .pf-tab.is-active { background: linear-gradient(135deg, #4f46e5, #7c3aed 60%, #db2777); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(124,58,237,.4); }

.pf-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pf-loading { grid-column: 1 / -1; text-align: center; color: #64748b; padding: 24px; }

.pf-free-row { grid-column: 1 / -1; background: rgba(248,250,252,.9); border: 1.5px dashed #cbd5e1; border-radius: 16px; padding: 10px 12px; }
.pf-free-lbl { font-size: .82rem; font-weight: 800; color: #64748b; margin-bottom: 8px; }
.pf-free-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-free-av { background: none; border: 3px solid transparent; border-radius: 50%; padding: 2px; cursor: pointer; transition: transform .12s, border-color .15s; }
    .pf-free-av:hover { transform: scale(1.1); }
    .pf-free-av.is-on { border-color: #4f46e5; }

.pf-item {
    position: relative;
    background: rgba(255,255,255,.92);
    border: 2px solid #e2e8f0;
    border-radius: 22px;
    padding: 14px 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15,23,42,.07);
    transition: transform .18s, border-color .15s, box-shadow .18s;
    animation: pfIn .45s cubic-bezier(.34,1.3,.64,1) both;
}

    .pf-item:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 18px 36px rgba(15,23,42,.14); }
    .pf-item.is-preview { border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79,70,229,.18), 0 16px 32px rgba(15,23,42,.12); }
    .pf-item--equipped { border-color: #22c55e; background: linear-gradient(180deg, #f0fdf4, #fff); }
    .pf-item--locked .pf-item-preview { filter: saturate(.85); }

/* Rarity glows: epic and legendary get an animated conic border */
.pf-rarity-epic, .pf-rarity-legendary { border-color: transparent; background-clip: padding-box; }
/* The border "spins" by animating the gradient angle (registered custom property), not by
   rotating the box — rotating a rectangle showed its corners. Browsers without @property
   simply get a static gradient. */
@property --pf-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
    /* Ring only: a masked overlay, so it never depends on z-index tricks (the tile's
       entry animation makes it a stacking context, which put a z-index:-1 layer on top). */
    .pf-rarity-epic::before, .pf-rarity-legendary::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 24px;
        padding: 2.5px;
        pointer-events: none;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        --pf-angle: 0deg;
        background: conic-gradient(from var(--pf-angle), #a855f7, #6366f1, #22d3ee, #a855f7);
        animation: pfAngle 5s linear infinite;
    }
    .pf-rarity-legendary::before { background: conic-gradient(from var(--pf-angle), #fbbf24, #f97316, #ef4444, #fbbf24); animation-duration: 3s; }
    .pf-rarity-legendary { box-shadow: 0 10px 28px rgba(249,115,22,.28); }

@keyframes pfAngle { to { --pf-angle: 360deg; } }
@keyframes pfSpin { to { transform: rotate(360deg); } }

.pf-item-rarity {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: .68rem;
    font-weight: 900;
    border-radius: 999px;
    padding: 2px 8px;
    background: #f1f5f9;
    color: #64748b;
}

.pf-rarity-rare .pf-item-rarity { background: #dbeafe; color: #1d4ed8; }
.pf-rarity-epic .pf-item-rarity { background: #ede9fe; color: #6d28d9; }
.pf-rarity-legendary .pf-item-rarity { background: linear-gradient(135deg, #fde68a, #f97316); color: #7c2d12; }

.pf-item-check {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-weight: 900;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(34,197,94,.45);
}

.pf-item-preview { height: 84px; display: flex; align-items: center; justify-content: center; margin-top: 6px; }
.pf-bg-swatch { width: 96px; height: 64px; border-radius: 14px; box-shadow: 0 8px 18px rgba(15,23,42,.2); }
.pf-fx-swatch { position: relative; width: 104px; height: 70px; border-radius: 14px; background: linear-gradient(135deg, #1e293b, #334155); overflow: hidden; box-shadow: 0 8px 18px rgba(15,23,42,.2); }
    .pf-fx-swatch .pf-fx { border-radius: 14px; }
.pf-item-name { font-weight: 900; color: #0f172a; font-size: .98rem; }

.pf-item-btn {
    font-family: inherit;
    font-size: .9rem;
    font-weight: 900;
    border-radius: 999px;
    padding: 7px 16px;
    border: none;
    cursor: pointer;
    min-width: 84px;
    transition: transform .12s, filter .15s;
}

    .pf-item-btn:hover { transform: scale(1.05); }

/* Dark button so the gold coin reads clearly (it vanished on the old yellow-orange background) */
.pf-item-btn--buy { background: linear-gradient(135deg, #1e293b, #334155); color: #fde68a; box-shadow: 0 4px 12px rgba(15,23,42,.3); border: 1.5px solid rgba(253,230,138,.35); }
    .pf-item-btn--buy.is-poor { background: #e2e8f0; color: #94a3b8; box-shadow: none; }
.pf-item-btn--equip { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,.35); }
.pf-item-btn--on { background: #dcfce7; color: #166534; cursor: default; }
.pf-item-btn--off { background: #fff; color: #475569; border: 1.5px solid #cbd5e1; }

.pf-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #fff;
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 800;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    animation: pfIn .3s ease;
}

    .pf-toast.bad { background: #b91c1c; }
    .pf-toast[hidden] { display: none; }

.pf-confetti {
    position: fixed;
    top: -20px;
    width: 10px;
    height: 16px;
    border-radius: 3px;
    z-index: 9998;
    pointer-events: none;
    animation: pfConfetti linear forwards;
}

@keyframes pfConfetti { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(var(--r)); opacity: .85; } }
@keyframes pfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 520px) {
    .pf-name { font-size: 1.6rem; }
    .pf-items { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .pf-aurora-blob, .pf-aura, .pf-avatar-big, .pf-shine, .pf-p, .pf-shop-coins, .pf-rarity-epic::before, .pf-rarity-legendary::before { animation: none !important; }
    .pf-p { opacity: .8; }
}

/* ══ Pets, stickers, auras, name styles, sounds, bundles ══════════════════════ */

/* Pet: sits at the avatar's feet and bobs */
.pf-pet { position: absolute; right: -14px; bottom: -6px; font-size: 2.2rem; line-height: 1; display: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); z-index: 3; }
    .pf-pet.is-on { display: block; animation: pfPetBob 2.4s ease-in-out infinite; }
    .pf-pet--pet_parrot { animation-duration: 1.6s !important; }
    .pf-pet--pet_dragon { font-size: 2.6rem; }
.pf-pet-preview { font-size: 3rem; line-height: 1; display: inline-block; animation: pfPetBob 2.4s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(15,23,42,.25)); }
@keyframes pfPetBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }

/* Sticker beside the name */
.pf-name { display: inline-flex; align-items: center; gap: 10px; justify-content: center; }
.pf-sticker { font-size: 1.6rem; line-height: 1; animation: pfStickerPop .5s cubic-bezier(.34,1.56,.64,1) both; }
    .pf-sticker:empty { display: none; }
@keyframes pfStickerPop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.pf-sticker-preview { display: inline-flex; align-items: center; gap: 8px; font-size: 1.4rem; font-weight: 900; color: #0f172a; }
    .pf-sticker-preview .pf-sticker-name { font-size: 1.1rem; color: #334155; }

/* Auras: bought ones replace the avatar-coloured glow */
.pf-aura--aura_neon, .pf-aura--aura_rainbow { animation: pfAura 3.2s ease-in-out infinite, pfSpin 6s linear infinite; }
.pf-aura--aura_fire { animation: pfAura 1.4s ease-in-out infinite; }
.pf-aura-preview { display: inline-block; width: 74px; height: 74px; border-radius: 50%; filter: blur(8px); animation: pfAura 3s ease-in-out infinite; }

/* Name styles (also used for the preview tile) */
@property --pf-hue { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pf-name--name_candy .pf-name-text { background: repeating-linear-gradient(135deg, #f472b6 0 10px, #fff 10px 20px); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; -webkit-text-stroke: 1px #be185d; }
.pf-name--name_3d .pf-name-text { color: #fff; text-shadow: 1px 1px 0 #c7d2fe, 2px 2px 0 #a5b4fc, 3px 3px 0 #818cf8, 4px 4px 0 #6366f1, 5px 5px 0 #4f46e5, 7px 7px 12px rgba(0,0,0,.45); }
.pf-name--preview.pf-name--name_3d .pf-name-text { color: #fff; }
.pf-name--name_ice .pf-name-text { color: #f0f9ff; text-shadow: 0 0 4px #fff, 0 0 12px #7dd3fc, 0 0 24px #38bdf8, 0 2px 0 #0284c7; letter-spacing: 1px; }
.pf-name--preview.pf-name--name_ice .pf-name-text { color: #0c4a6e; text-shadow: 0 0 6px #bae6fd, 0 0 14px #7dd3fc; }
.pf-name--name_gold .pf-name-text { background: linear-gradient(100deg, #b45309 0%, #fde68a 25%, #fff7d6 40%, #f59e0b 55%, #b45309 75%, #fde68a 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; animation: pfShimmer 3.5s linear infinite; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.pf-name--name_fire .pf-name-text { background: linear-gradient(0deg, #ef4444 0%, #f97316 35%, #fde047 70%, #fff7d6 100%); background-size: 100% 220%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; animation: pfFlicker 1.2s ease-in-out infinite alternate; filter: drop-shadow(0 0 10px rgba(249,115,22,.85)); }
.pf-name--name_rainbow .pf-name-text { background: linear-gradient(90deg, #ef4444, #f59e0b, #facc15, #22c55e, #3b82f6, #a855f7, #ef4444); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; animation: pfShimmer 4s linear infinite; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.pf-name--name_galaxy { position: relative; }
.pf-name--name_galaxy .pf-name-text { background: linear-gradient(120deg, #c084fc, #60a5fa, #f0abfc, #818cf8, #c084fc); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; animation: pfShimmer 5s linear infinite; filter: drop-shadow(0 0 10px rgba(168,85,247,.8)); }
.pf-name--name_galaxy::before, .pf-name--name_galaxy::after { content: '✦'; position: absolute; color: #fff; font-size: .45em; text-shadow: 0 0 8px #c084fc; animation: pfTwinkle 1.8s ease-in-out infinite; pointer-events: none; }
.pf-name--name_galaxy::before { top: -.25em; right: -.6em; }
.pf-name--name_galaxy::after { bottom: -.15em; left: -.5em; animation-delay: -.9s; }
@keyframes pfShimmer { to { background-position: 250% 0; } }
@keyframes pfFlicker { from { background-position: 0 0; } to { background-position: 0 100%; } }
.pf-name--preview { font-size: 1.5rem; color: #0f172a; text-shadow: none; }
.pf-name--name_shadow .pf-name-text { text-shadow: 4px 4px 0 #f472b6, 8px 8px 0 rgba(96,165,250,.6); }
.pf-name--name_script .pf-name-text { font-family: 'Segoe Script', 'Brush Script MT', 'Comic Sans MS', cursive; font-weight: 700; letter-spacing: .5px; }
.pf-name--name_gradient .pf-name-text { background: linear-gradient(90deg, #fbbf24, #f472b6, #60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }
.pf-name--name_neon .pf-name-text { color: #fff; text-shadow: 0 0 6px #fff, 0 0 14px #22d3ee, 0 0 28px #a855f7, 0 0 42px #a855f7; }
.pf-name--preview.pf-name--name_neon .pf-name-text { color: #0f172a; text-shadow: 0 0 6px #fff, 0 0 12px #22d3ee, 0 0 22px #a855f7; }

/* Avatar animation previews (the tile shows the player's own avatar moving) */
.pf-anim-preview { display: inline-flex; padding: 8px; }

/* Buy confirmation dialog */
.pf-confirm { position: fixed; inset: 0; z-index: 10000; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: pfFade .18s ease-out; }
    .pf-confirm[hidden] { display: none; }
.pf-confirm-box { background: #fff; border-radius: 26px; padding: 26px 26px 22px; width: min(400px, 100%); text-align: center; box-shadow: 0 30px 70px rgba(15,23,42,.35); animation: pfIn .35s cubic-bezier(.34,1.4,.64,1); direction: rtl; font-family: 'Heebo', 'Segoe UI', sans-serif; }
.pf-confirm-preview { display: flex; justify-content: center; align-items: center; min-height: 90px; margin-bottom: 10px; }
.pf-confirm-title { font-size: 1.25rem; font-weight: 900; color: #0f172a; margin: 0 0 4px; }
.pf-confirm-price { font-size: 1.05rem; font-weight: 800; color: #334155; margin-bottom: 4px; }
    .pf-confirm-price b { color: #b45309; }
.pf-confirm-left { font-size: .85rem; color: #64748b; margin-bottom: 18px; }
.pf-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.pf-confirm-btn { font-family: inherit; font-size: 1rem; font-weight: 900; border-radius: 14px; padding: 11px 28px; cursor: pointer; border: 2px solid transparent; min-width: 110px; transition: transform .12s; }
    .pf-confirm-btn:hover { transform: translateY(-1px); }
.pf-confirm-btn--yes { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; box-shadow: 0 8px 20px rgba(34,197,94,.35); }
.pf-confirm-btn--no { background: #fff; color: #475569; border-color: #cbd5e1; }
@keyframes pfFade { from { opacity: 0; } to { opacity: 1; } }

/* Challenges cracked */
.pf-ch-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pf-ch-stat { background: rgba(255,255,255,.85); border: 1.5px solid #e2e8f0; border-radius: 18px; padding: 12px; text-align: center; }
.pf-ch-stat-val { font-size: 1.5rem; font-weight: 900; color: #0f172a; }
.pf-ch-stat-lbl { font-size: .78rem; font-weight: 700; color: #64748b; }
.pf-ch-list { display: flex; flex-direction: column; gap: 8px; }
.pf-ch-row { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.88); border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 10px 14px; animation: pfIn .4s cubic-bezier(.34,1.2,.64,1) both; }
.pf-ch-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.pf-ch-ico--daily { background: #dbeafe; } .pf-ch-ico--weekly { background: #ede9fe; } .pf-ch-ico--special { background: linear-gradient(135deg, #fde68a, #fdba74); }
.pf-ch-body { flex: 1; min-width: 0; }
.pf-ch-title { font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-ch-meta { font-size: .78rem; color: #64748b; }
.pf-ch-pts { font-weight: 900; color: #b45309; white-space: nowrap; }
.pf-ch-empty { background: rgba(255,255,255,.7); border: 1.5px dashed #cbd5e1; border-radius: 18px; padding: 22px; text-align: center; color: #64748b; font-weight: 700; }
    .pf-ch-empty a { color: #4f46e5; }

/* Sounds (removed from the shop; kept for old markup) */
.pf-sound-play {
    width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; font-size: 1.5rem; font-weight: 900;
    box-shadow: 0 8px 20px rgba(124,58,237,.4); transition: transform .12s;
}
    .pf-sound-play:hover { transform: scale(1.08); }

/* Bundles */
.pf-item--bundle { grid-column: span 2; }
.pf-bundle-preview { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 1.6rem; }
.pf-bundle-part { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; }
.pf-bundle-bg { display: inline-block; width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 3px 8px rgba(15,23,42,.2); }
.pf-item-saving { font-size: .78rem; color: #15803d; font-weight: 800; }
    .pf-item-saving s { color: #94a3b8; }
.pf-bundle-note .pf-free-lbl { margin-bottom: 0; font-size: .9rem; color: #475569; }

/* Seasonal tag */
.pf-item-season { position: absolute; top: 32px; right: 10px; font-size: .66rem; font-weight: 900; border-radius: 999px; padding: 2px 8px; background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }

/* Tab row scrolls on narrow screens */
.pf-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: thin; }
    .pf-tabs .pf-tab { flex-shrink: 0; }
@media (min-width: 700px) { .pf-tabs { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 520px) { .pf-item--bundle { grid-column: span 2; } }

/* ══ V2 layout: hero card, chips, journey, trophy wall, collapsed shop ═════════ */

/* Aurora colours follow the card background (profile.js sets --au1..3) */
.pf-aurora-blob--1 { background: var(--au1, #c7d2fe); }
.pf-aurora-blob--2 { background: var(--au2, #fbcfe8); }
.pf-aurora-blob--3 { background: var(--au3, #a5f3fc); }
.pf-aurora-blob { transition: background 1.2s ease; opacity: .6; }

/* Hero */
/* Round pencil: opens the details editor (name, email, phone, password, quick link) */
.pf-edit-fab {
    position: absolute; top: 16px; left: 16px; z-index: 5;
    width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6);
    background: rgba(255,255,255,.22); backdrop-filter: blur(6px); color: #fff;
    font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: transform .15s, background .15s;
}
    .pf-edit-fab:hover { transform: scale(1.08); background: rgba(255,255,255,.35); }
    .pf-edit-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
    .pf-card--light .pf-edit-fab { background: rgba(255,255,255,.85); border-color: rgba(15,23,42,.15); color: #0f172a; }

/* The hero card stays still: no tilt on hover and no shine sweep */
.pf-wrap--v2 .pf-shine { display: none; }
.pf-card-inner--hero { padding: 34px 24px 26px; gap: 10px; }
.pf-avatar-stage--xl { width: 176px; height: 176px; margin-top: 4px; }
    .pf-avatar-stage--xl .pf-avatar-big { width: 176px; height: 176px; }
    .pf-avatar-stage--xl .pf-avatar-big .pf-av { box-shadow: 0 18px 44px rgba(0,0,0,.45); }
    .pf-avatar-stage--xl .pf-aura { inset: -30px; filter: blur(28px); }
    .pf-avatar-stage--xl .pf-pet { font-size: 2.6rem; right: -18px; bottom: -8px; }
    .pf-avatar-stage--xl .pf-pet--pet_dragon { font-size: 3rem; }

/* Progress ring to the next rank */
.pf-ring { position: absolute; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); transform: rotate(-90deg); z-index: 0; pointer-events: none; }
.pf-ring-bg { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 7; }
.pf-ring-fill { fill: none; stroke: url(#pf-ring-grad); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px rgba(253,230,138,.8)); }
.pf-card--light .pf-ring-bg { stroke: rgba(15,23,42,.12); }
.pf-avatar-stage--xl .pf-aura, .pf-avatar-stage--xl .pf-avatar-big { z-index: 1; }

.pf-name--xl { font-size: 2.7rem; }
.pf-rank-badge--shimmer { position: relative; overflow: hidden; }
    .pf-rank-badge--shimmer::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-18deg); animation: pfShine 1.4s 1.2s ease-out forwards; }
.pf-next { font-size: .9rem; font-weight: 700; opacity: .9; margin-top: 4px; min-height: 1.2em; }

/* Chips row */
.pf-chips { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; animation: pfIn .5s .2s cubic-bezier(.34,1.2,.64,1) both; }
.pf-chip { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border: 2px solid #e2e8f0; border-radius: 999px; padding: 12px 22px; box-shadow: 0 8px 20px rgba(15,23,42,.08); }
    .pf-chip b { font-size: 1.5rem; color: #0f172a; line-height: 1; }
    .pf-chip-lbl { font-size: 1.05rem; color: #475569; font-weight: 800; }
    .pf-chip-ico { font-size: 1.45rem; }
@media (max-width: 520px) { .pf-chip { padding: 10px 16px; gap: 8px; } .pf-chip b { font-size: 1.25rem; } .pf-chip-lbl { font-size: .95rem; } }

/* Journey */
.pf-mini-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-mini { flex: 1 1 160px; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.8); border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 10px 14px; }
    .pf-mini b { font-size: 1.15rem; color: #0f172a; }
    .pf-mini span:last-child { font-size: .8rem; color: #64748b; font-weight: 700; }
    .pf-mini-ico { font-size: 1.3rem; }
.pf-medals-hdr { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 2px 8px; }
.pf-medals-title { font-weight: 900; color: #1e293b; }
.pf-medals-sum { font-size: .8rem; color: #64748b; font-weight: 700; }
.pf-medals { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.pf-medal { flex: 0 0 118px; text-align: center; scroll-snap-align: start; animation: pfIn .45s cubic-bezier(.34,1.3,.64,1) both; }
.pf-medal-disc { width: 66px; height: 66px; margin: 0 auto 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; background: linear-gradient(135deg, #dbeafe, #93c5fd); box-shadow: 0 8px 18px rgba(59,130,246,.3), 0 0 0 3px #fff inset; }
.pf-medal--weekly .pf-medal-disc { background: linear-gradient(135deg, #ede9fe, #c4b5fd); box-shadow: 0 8px 18px rgba(139,92,246,.3), 0 0 0 3px #fff inset; }
.pf-medal--special .pf-medal-disc { background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 8px 18px rgba(245,158,11,.4), 0 0 0 3px #fff inset; }
.pf-medal--empty .pf-medal-disc { background: #e2e8f0; box-shadow: none; filter: grayscale(1); }
.pf-medal-name { font-size: .78rem; font-weight: 800; color: #1e293b; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-medal-meta { font-size: .72rem; color: #b45309; font-weight: 800; text-decoration: none; }
.pf-medal--empty .pf-medal-meta { color: #4f46e5; }

/* Trophy wall */
.pf-h2-count { font-size: .9rem; color: #64748b; font-weight: 800; background: #f1f5f9; border-radius: 999px; padding: 2px 10px; }
    .pf-h2-count:empty { display: none; }
.pf-trophies { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-trophy { position: relative; width: 92px; background: rgba(255,255,255,.9); border: 2px solid #e2e8f0; border-radius: 18px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; transition: transform .15s, box-shadow .15s; animation: pfIn .4s cubic-bezier(.34,1.3,.64,1) both; }
    .pf-trophy:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(15,23,42,.12); }
    .pf-trophy.is-on::after { content: '✓'; position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%; background: #22c55e; color: #fff; font-size: .7rem; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(34,197,94,.5); }
    .pf-trophy.is-preview { border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79,70,229,.18); }
    .pf-trophy.pf-rarity-epic::before, .pf-trophy.pf-rarity-legendary::before { border-radius: 20px; }
.pf-trophy-disc { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f8fafc; box-shadow: 0 0 0 2px #e2e8f0 inset; overflow: visible; }
.pf-trophy-name { font-size: .72rem; font-weight: 800; color: #1e293b; text-align: center; line-height: 1.15; }
.pf-trophies-empty { flex: 1; background: rgba(255,255,255,.7); border: 1.5px dashed #cbd5e1; border-radius: 18px; padding: 18px; text-align: center; color: #64748b; font-weight: 700; }
.pf-mini-emoji { font-size: 1.7rem; line-height: 1; }
.pf-mini-bg { display: inline-block; border-radius: 50%; box-shadow: 0 3px 8px rgba(15,23,42,.25); }
.pf-mini-aura { display: inline-block; width: 40px; height: 40px; border-radius: 50%; filter: blur(4px); }
.pf-name--mini { font-size: 1rem !important; }

/* Shop CTA + body */
.pf-shop-cta {
    width: 100%; display: flex; align-items: center; gap: 16px; text-align: right;
    background: linear-gradient(135deg, #4f46e5, #7c3aed 55%, #db2777); color: #fff; border: none; border-radius: 24px;
    padding: 18px 22px; cursor: pointer; font-family: inherit; box-shadow: 0 18px 40px rgba(124,58,237,.35);
    transition: transform .15s, box-shadow .15s; position: relative; overflow: hidden;
}
    .pf-shop-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: pfShine 2.4s 1s ease-out infinite; }
    .pf-shop-cta:hover { transform: translateY(-2px); box-shadow: 0 24px 50px rgba(124,58,237,.45); }
    .pf-shop-cta.is-open { border-radius: 24px 24px 0 0; box-shadow: none; }
.pf-shop-cta-ico { font-size: 2.2rem; }
.pf-shop-cta-txt { flex: 1; display: flex; flex-direction: column; }
    .pf-shop-cta-txt b { font-size: 1.35rem; font-weight: 900; }
    .pf-shop-cta-txt small { font-size: .85rem; opacity: .9; }
.pf-shop-cta-coins { background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.4); border-radius: 999px; padding: 6px 14px; font-weight: 900; }
.pf-shop-body { background: rgba(255,255,255,.55); backdrop-filter: blur(10px); border: 1.5px solid #e2e8f0; border-top: none; border-radius: 0 0 24px 24px; padding: 16px 16px 20px; animation: pfIn .4s cubic-bezier(.34,1.2,.64,1); }
    .pf-shop-body[hidden] { display: none; }

.pf-showcase-hdr { font-weight: 900; color: #1e293b; margin: 6px 2px 8px; }
.pf-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.pf-feature { position: relative; background: #fff; border: 2px solid #e2e8f0; border-radius: 24px; padding: 14px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; box-shadow: 0 14px 34px rgba(15,23,42,.1); animation: pfIn .5s cubic-bezier(.34,1.3,.64,1) both; transition: transform .18s, box-shadow .18s; }
    .pf-feature:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(15,23,42,.16); }
    .pf-feature.is-preview { border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79,70,229,.18); }
    .pf-feature.pf-rarity-epic::before, .pf-feature.pf-rarity-legendary::before { border-radius: 26px; }
.pf-feature-cat { font-size: .74rem; font-weight: 800; color: #64748b; }
.pf-feature-preview { height: 96px; display: flex; align-items: center; justify-content: center; }
.pf-feature-name { font-weight: 900; color: #0f172a; font-size: 1.05rem; }
.pf-feature-rarity { font-size: .74rem; color: #64748b; font-weight: 700; }

.pf-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .pf-cats[hidden], .pf-showcase[hidden], .pf-showcase-hdr[hidden], .pf-cat-view[hidden] { display: none; }
.pf-cat { position: relative; overflow: hidden; background: var(--hue); color: #fff; border: none; border-radius: 22px; padding: 18px 14px 14px; text-align: right; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 2px; min-height: 124px; box-shadow: 0 12px 28px rgba(15,23,42,.14); transition: transform .15s, box-shadow .15s; animation: pfIn .45s cubic-bezier(.34,1.3,.64,1) both; }
    .pf-cat::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), transparent 50%); pointer-events: none; }
    .pf-cat:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 40px rgba(15,23,42,.2); }
.pf-cat-ico { font-size: 2rem; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.pf-cat-name { font-size: 1.05rem; font-weight: 900; }
.pf-cat-sub { font-size: .76rem; opacity: .92; }
.pf-cat-count { position: absolute; top: 10px; left: 12px; background: rgba(0,0,0,.25); border-radius: 999px; padding: 2px 9px; font-size: .74rem; font-weight: 900; }

.pf-cat-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pf-cat-back { font-family: inherit; font-weight: 800; font-size: .9rem; background: #fff; border: 1.5px solid #cbd5e1; color: #334155; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
    .pf-cat-back:hover { background: #f1f5f9; }
.pf-cat-title { margin: 0; font-size: 1.2rem; font-weight: 900; color: #0f172a; }

@media (max-width: 640px) {
    .pf-showcase { grid-template-columns: 1fr 1fr; }
    .pf-feature:nth-child(3) { grid-column: span 2; }
    .pf-name--xl { font-size: 2rem; }
    .pf-avatar-stage--xl { width: 150px; height: 150px; }
        .pf-avatar-stage--xl .pf-avatar-big { width: 150px; height: 150px; }
    .pf-shop-cta-txt small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-shop-cta::after, .pf-rank-badge--shimmer::after, .pf-medal, .pf-trophy, .pf-feature, .pf-cat { animation: none !important; }
}