/* PROFILE STORE: every look is a class "ps-<slug>". Frames go on an avatar (or its wrapper), borders and glows on .ps_root (the whole
   profile), cover effects on the cover. The same classes draw the previews in the store. */

/* ---------- avatar frames ---------- */
.ps-f_clean { box-shadow:0 0 0 2px #fff; }
.ps-f_gold { box-shadow:0 0 0 2px #1a1203, 0 0 0 4px #f5c542, 0 0 12px 3px rgba(245,197,66,.55); }
.ps-f_neon { box-shadow:0 0 0 2px #00e5ff, 0 0 10px 2px #00e5ff, 0 0 22px 4px rgba(0,229,255,.5); }
.ps-f_rose { box-shadow:0 0 0 2px #ffd1dc, 0 0 0 4px #f48fb1, 0 0 14px 3px rgba(244,143,177,.55); }
.ps-f_sakura { outline:3px dotted #f8bbd0; outline-offset:2px; box-shadow:0 0 12px rgba(248,187,208,.55); }
.ps-f_royal { box-shadow:0 0 0 2px #fff, 0 0 0 5px #6d28d9, 0 0 16px 4px rgba(109,40,217,.6); }
.ps-f_frost { animation:psFrost 2.4s ease-in-out infinite; }
.ps-f_fire { animation:psFire 1.1s ease-in-out infinite; }
.ps-f_rainbow { animation:psRainbowRing 4s linear infinite; }
@keyframes psFrost { 0%, 100% { box-shadow:0 0 0 2px #cdeeff, 0 0 8px 2px rgba(120,200,255,.5); } 50% { box-shadow:0 0 0 3px #fff, 0 0 18px 5px rgba(120,200,255,.9); } }
@keyframes psFire { 0%, 100% { box-shadow:0 0 0 2px #ff3d00, 0 0 10px 3px rgba(255,61,0,.7), 0 0 20px 6px rgba(255,150,0,.35); } 50% { box-shadow:0 0 0 3px #ffb300, 0 0 16px 5px rgba(255,179,0,.8), 0 0 26px 8px rgba(255,61,0,.45); } }
@keyframes psRainbowRing {
	0% { box-shadow:0 0 0 3px #ff3b3b, 0 0 14px 3px #ff3b3b; } 17% { box-shadow:0 0 0 3px #ffb020, 0 0 14px 3px #ffb020; }
	33% { box-shadow:0 0 0 3px #ffee33, 0 0 14px 3px #ffee33; } 50% { box-shadow:0 0 0 3px #38e07a, 0 0 14px 3px #38e07a; }
	67% { box-shadow:0 0 0 3px #3aa0ff, 0 0 14px 3px #3aa0ff; } 83% { box-shadow:0 0 0 3px #b04bff, 0 0 14px 3px #b04bff; }
	100% { box-shadow:0 0 0 3px #ff3b3b, 0 0 14px 3px #ff3b3b; }
}

/* ---------- profile borders (drawn over everything, never blocks a click) ---------- */
.ps_root { position:relative; }
.ps_root[class*="ps-b_"]::after { content:''; position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none; border-radius:inherit; z-index:60; }
.ps-b_clean::after { box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); }
.ps-b_dash::after { border:3px dashed #fff; }
.ps-b_gold::after { box-shadow:inset 0 0 0 3px #f5c542, inset 0 0 0 5px #1a1203, inset 0 0 20px rgba(245,197,66,.45); }
.ps-b_double::after { border:2px solid #fff; box-shadow:inset 0 0 0 5px transparent, inset 0 0 0 7px rgba(255,255,255,.55); }
.ps-b_neon::after { box-shadow:inset 0 0 0 2px #00e5ff, inset 0 0 14px 2px rgba(0,229,255,.7), inset 0 0 36px rgba(168,85,247,.45); }
.ps-b_ember::after { animation:psEmber 1.6s ease-in-out infinite; }
.ps-b_aurora::after { animation:psAurora 6s ease-in-out infinite; }
.ps-b_rainbow::after { animation:psRainbowEdge 5s linear infinite; }
@keyframes psEmber { 0%, 100% { box-shadow:inset 0 0 0 2px #ff5a1f, inset 0 0 18px 3px rgba(255,90,31,.6); } 50% { box-shadow:inset 0 0 0 3px #ffb300, inset 0 0 30px 6px rgba(255,140,0,.65); } }
@keyframes psAurora { 0%, 100% { box-shadow:inset 0 0 0 2px #2dffb2, inset 0 0 26px 4px rgba(45,255,178,.55); } 50% { box-shadow:inset 0 0 0 2px #8a6bff, inset 0 0 30px 6px rgba(138,107,255,.6); } 75% { box-shadow:inset 0 0 0 2px #2db7ff, inset 0 0 28px 5px rgba(45,183,255,.55); } }
@keyframes psRainbowEdge {
	0% { box-shadow:inset 0 0 0 3px #ff3b3b, inset 0 0 18px 3px #ff3b3b; } 17% { box-shadow:inset 0 0 0 3px #ffb020, inset 0 0 18px 3px #ffb020; }
	33% { box-shadow:inset 0 0 0 3px #ffee33, inset 0 0 18px 3px #ffee33; } 50% { box-shadow:inset 0 0 0 3px #38e07a, inset 0 0 18px 3px #38e07a; }
	67% { box-shadow:inset 0 0 0 3px #3aa0ff, inset 0 0 18px 3px #3aa0ff; } 83% { box-shadow:inset 0 0 0 3px #b04bff, inset 0 0 18px 3px #b04bff; }
	100% { box-shadow:inset 0 0 0 3px #ff3b3b, inset 0 0 18px 3px #ff3b3b; }
}

/* ---------- text glow (inherits to every word in the profile) ---------- */
.ps-g_soft { text-shadow:0 1px 3px rgba(0,0,0,.65); }
.ps-g_white { text-shadow:0 0 6px rgba(255,255,255,.85), 0 0 14px rgba(255,255,255,.45); }
.ps-g_pink { text-shadow:0 0 6px #ff4fa3, 0 0 16px rgba(255,79,163,.6); }
.ps-g_gold { text-shadow:0 0 6px #ffcf4a, 0 0 16px rgba(255,170,0,.55); }
.ps-g_toxic { text-shadow:0 0 6px #7dff3a, 0 0 16px rgba(80,255,60,.55); }
.ps-g_cyan { animation:psGlowCyan 2.2s ease-in-out infinite; }
.ps-g_rainbow { animation:psGlowRainbow 5s linear infinite; }
@keyframes psGlowCyan { 0%, 100% { text-shadow:0 0 4px #00e5ff, 0 0 10px rgba(0,229,255,.5); } 50% { text-shadow:0 0 8px #7df3ff, 0 0 22px rgba(0,229,255,.9); } }
@keyframes psGlowRainbow {
	0% { text-shadow:0 0 7px #ff3b3b, 0 0 16px rgba(255,59,59,.6); } 25% { text-shadow:0 0 7px #ffee33, 0 0 16px rgba(255,238,51,.6); }
	50% { text-shadow:0 0 7px #38e07a, 0 0 16px rgba(56,224,122,.6); } 75% { text-shadow:0 0 7px #3aa0ff, 0 0 16px rgba(58,160,255,.6); }
	100% { text-shadow:0 0 7px #ff3b3b, 0 0 16px rgba(255,59,59,.6); }
}

/* ---------- cover effects ---------- */
[class*="ps-c_"] { position:relative; overflow:hidden; }
[class*="ps-c_"]::after { content:''; position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none; z-index:1; }
.ps-c_vignette::after { background:radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%); }
.ps-c_sunset::after { background:linear-gradient(180deg, rgba(255,94,98,.38), rgba(255,195,113,.28)); mix-blend-mode:soft-light; }
.ps-c_ocean::after { background:linear-gradient(180deg, rgba(0,120,255,.15), rgba(0,40,120,.5)); }
.ps-c_scan::after { background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 1px, transparent 1px, transparent 3px); }
.ps-c_aurora::after { background:linear-gradient(120deg, rgba(0,255,170,.38), rgba(120,80,255,.38), rgba(0,180,255,.38), rgba(0,255,170,.38)); background-size:300% 300%; mix-blend-mode:screen; animation:psAuroraShift 8s ease-in-out infinite; }
.ps-c_snow::after { background-image:radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 60px 90px, #fff, transparent), radial-gradient(3px 3px at 110px 20px, rgba(255,255,255,.9), transparent), radial-gradient(2px 2px at 150px 130px, #fff, transparent), radial-gradient(3px 3px at 190px 70px, rgba(255,255,255,.85), transparent); background-size:200px 160px; animation:psSnow 7s linear infinite; }
.ps-c_stars::after { background-color:rgba(5,8,30,.35); background-image:radial-gradient(1.5px 1.5px at 25px 35px, #fff, transparent), radial-gradient(1px 1px at 90px 60px, #fff, transparent), radial-gradient(2px 2px at 140px 25px, #cfe3ff, transparent), radial-gradient(1px 1px at 55px 110px, #fff, transparent), radial-gradient(1.5px 1.5px at 170px 95px, #fff, transparent); background-size:200px 140px; animation:psTwinkle 3s ease-in-out infinite; }
.ps-c_glitter::after { background-image:radial-gradient(2px 2px at 30px 40px, #ffe9a8, transparent), radial-gradient(2px 2px at 100px 80px, #ffc2f2, transparent), radial-gradient(2px 2px at 160px 30px, #b8f0ff, transparent), radial-gradient(1.5px 1.5px at 70px 120px, #fff, transparent), radial-gradient(2px 2px at 190px 110px, #ffe9a8, transparent); background-size:220px 150px; animation:psGlitter 2.4s steps(2, end) infinite; }
@keyframes psAuroraShift { 0%, 100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes psSnow { from { background-position:0 0; } to { background-position:40px 160px; } }
@keyframes psTwinkle { 0%, 100% { opacity:.55; } 50% { opacity:1; } }
@keyframes psGlitter { 0% { opacity:.4; filter:hue-rotate(0deg); } 50% { opacity:1; filter:hue-rotate(60deg); } 100% { opacity:.4; filter:hue-rotate(0deg); } }
@media (prefers-reduced-motion:reduce) { [class*="ps-"], [class*="ps-"]::after { animation:none !important; } }

/* ---------- the store window (Edit profile > Profile Store) ---------- */
.ps-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ps-bal { display:flex; gap:8px; flex-wrap:wrap; }
.ps-bal span { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:14px; background:rgba(127,127,127,.18); font-size:13px; font-weight:700; }
.ps-bal .ps-g i { color:#f5c542; } .ps-bal .ps-r i { color:#ff5a8a; }
.ps-hint { font-size:12px; opacity:.7; }
.ps-pv { border-radius:12px; overflow:hidden; background:#16161a; margin-bottom:12px; }
.ps-pv-cover { height:130px; background:linear-gradient(135deg,#3b2f6b,#1d1d2b) center/cover no-repeat; display:flex; align-items:flex-end; gap:12px; padding:12px; }
.ps-pv-av { flex:0 0 auto; width:74px; height:74px; border-radius:10px; position:relative; z-index:2; }
.ps-pv-av img { width:100%; height:100%; border-radius:inherit; object-fit:cover; display:block; }
.ps-pv-who { position:relative; z-index:2; min-width:0; color:#fff; }
.ps-pv-name { font-size:18px; font-weight:700; }
.ps-pv-rank { font-size:12px; opacity:.85; }
.ps-pv-body { padding:10px 14px; font-size:12px; color:#ddd; }
.ps-cats { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.ps-cat { border:0; border-radius:15px; padding:7px 13px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; background:rgba(127,127,127,.18); color:inherit; }
.ps-cat.on { background:#6d4cff; color:#fff; }
.ps-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:10px; }
.ps-tile { border-radius:12px; padding:10px 8px 9px; text-align:center; background:rgba(127,127,127,.12); border:1px solid rgba(127,127,127,.2); cursor:pointer; transition:transform .12s, border-color .12s; }
.ps-tile:hover { transform:translateY(-2px); border-color:rgba(127,127,127,.5); }
.ps-tile.try { border-color:#6d4cff; }
.ps-tile.worn { border-color:#22c55e; background:rgba(34,197,94,.1); }
.ps-sw { height:56px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.ps-sw .a { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.ps-sw .b { width:84px; height:44px; border-radius:8px; background:#23232b; }
.ps-sw .g { font-size:22px; font-weight:800; color:#fff; }
.ps-sw .c { width:84px; height:44px; border-radius:8px; background:linear-gradient(135deg,#4b3b8f,#1d1d2b); }
.ps-nm { font-size:12px; font-weight:700; margin-bottom:6px; line-height:1.2; }
.ps-acts { display:flex; gap:5px; justify-content:center; flex-wrap:wrap; }
.ps-btn { border:0; border-radius:12px; padding:5px 9px; font:inherit; font-size:11px; font-weight:700; cursor:pointer; color:#fff; background:#6d4cff; }
.ps-btn.gold { background:#c8901a; } .ps-btn.ruby { background:#d6336c; } .ps-btn.go { background:#22a55a; } .ps-btn.off { background:rgba(127,127,127,.5); }
.ps-btn[disabled] { opacity:.5; cursor:default; }
.ps-lock { font-size:11px; opacity:.75; }
.ps-err { padding:14px; text-align:center; opacity:.8; }

/* ======================================================================
   MORE LOOKS: accent colours, name styles, mood styles, bio styles, panel looks, and the cover behind the whole profile
   ====================================================================== */

/* ---------- accent colour: one colour that tints tabs, icons, the name underline and the profile tiles ---------- */
.ps-a_ocean { --ps-ac:#2f8cff; --ps-fg:#fff; }
.ps-a_rose { --ps-ac:#ff5c9d; --ps-fg:#fff; }
.ps-a_violet { --ps-ac:#8b5cf6; --ps-fg:#fff; }
.ps-a_mint { --ps-ac:#2dd4a3; --ps-fg:#082a21; }
.ps-a_sunset { --ps-ac:#ff7a2f; --ps-fg:#1c0a00; }
.ps-a_gold { --ps-ac:#f5b800; --ps-fg:#1c1400; }
.ps-a_crimson { --ps-ac:#e11d48; --ps-fg:#fff; }
.ps-a_lime { --ps-ac:#a3e635; --ps-fg:#14200a; }
.ps-a_ice { --ps-ac:#d9ecff; --ps-fg:#0b1a2b; }
.ps-a_custom { --ps-ac:#8b5cf6; --ps-fg:#fff; }
[class*="ps-a_"] .modal_menu_item.modal_selected { background:var(--ps-ac) !important; color:var(--ps-fg, #fff) !important; }
[class*="ps-a_"] .proicon { color:var(--ps-ac); }
[class*="ps-a_"] .pro_name { text-decoration:underline; text-decoration-color:var(--ps-ac); text-decoration-thickness:3px; text-underline-offset:5px; }
[class*="ps-a_"] .pb_tile { --pb:var(--ps-ac) !important; }
.ps-dot { display:block; width:34px; height:34px; border-radius:50%; background:var(--ps-ac); box-shadow:0 0 0 3px rgba(255,255,255,.25); }

/* ---------- name styles (on the name in the profile) ---------- */
.ps-n_rose .pro_name, .ps-n_ocean .pro_name, .ps-n_sunset .pro_name, .ps-n_gold .pro_name, .ps-n_ice .pro_name, .ps-n_shimmer .pro_name, .ps-n_fire .pro_name { -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; text-shadow:none; }
.ps-n_rose .pro_name { background-image:linear-gradient(90deg, #ff8fb8, #ffd1a8); }
.ps-n_ocean .pro_name { background-image:linear-gradient(90deg, #38bdf8, #818cf8); }
.ps-n_sunset .pro_name { background-image:linear-gradient(90deg, #ff5e62, #ffb36b); }
.ps-n_gold .pro_name { background-image:linear-gradient(180deg, #fff3b0, #f5c542 45%, #b8860b 62%, #ffe27a); }
.ps-n_ice .pro_name { background-image:linear-gradient(180deg, #ffffff, #a5d8ff 60%, #e8f6ff); }
.ps-n_neon .pro_name { color:transparent; -webkit-text-stroke:1.5px #00f0ff; text-shadow:0 0 8px #00f0ff, 0 0 20px rgba(0,240,255,.7); }
.ps-n_shimmer .pro_name { background-image:linear-gradient(110deg, #ffffff 35%, #8fb4ff 47%, #ffffff 60%); background-size:260% 100%; animation:psShimmer 2.6s linear infinite; }
.ps-n_fire .pro_name { background-image:linear-gradient(180deg, #ffe23a, #ff7a00 55%, #ff2a00); background-size:100% 200%; animation:psFlame 1.4s ease-in-out infinite alternate; }
@keyframes psShimmer { from { background-position:130% 0; } to { background-position:-130% 0; } }
@keyframes psFlame { from { background-position:0 0; } to { background-position:0 100%; } }

/* ---------- mood styles ---------- */
.ps-m_pill .pro_mood, .ps-m_glass .pro_mood, .ps-m_sticker .pro_mood, .ps-m_neon .pro_mood, .ps-m_gradient .pro_mood { display:inline-block; padding:3px 12px; border-radius:12px; }
.ps-m_pill .pro_mood { background:var(--ps-ac, #8b5cf6); color:var(--ps-fg, #fff); text-shadow:none; }
.ps-m_glass .pro_mood { background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ps-m_sticker .pro_mood { background:#fff; color:#111; border-radius:6px; transform:rotate(-2deg); box-shadow:2px 2px 0 rgba(0,0,0,.4); text-shadow:none; }
.ps-m_neon .pro_mood { border:1px solid var(--ps-ac, #00f0ff); color:#fff; box-shadow:0 0 8px var(--ps-ac, #00f0ff), inset 0 0 8px rgba(255,255,255,.12); }
.ps-m_gradient .pro_mood { background:linear-gradient(90deg, #ff6ec4, #7873f5); color:#fff; text-shadow:none; }
.ps-m_typing .pro_mood::after { content:'|'; margin-left:2px; animation:psBlink 1s steps(1) infinite; }
@keyframes psBlink { 50% { opacity:0; } }

/* ---------- bio styles (the "About me" text) ---------- */
.ps-s_quote #proabout .tbreak, .ps-s_quote .ps-bio { border-left:4px solid var(--ps-ac, #8b5cf6); padding:10px 14px; font-style:italic; background:rgba(127,127,127,.14); border-radius:0 8px 8px 0; }
.ps-s_glass #proabout .tbreak, .ps-s_glass .ps-bio { padding:14px; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.ps-s_script #proabout .tbreak, .ps-s_script .ps-bio { font-family:'Comic Neue', 'Segoe Print', cursive; font-size:17px; }
.ps-s_mono #proabout .tbreak, .ps-s_mono .ps-bio { font-family:'Courier New', monospace; letter-spacing:.3px; }
.ps-s_orbit #proabout .tbreak, .ps-s_orbit .ps-bio { font-family:'Orbitron', sans-serif; font-size:12px; letter-spacing:1px; }
.ps-s_paper #proabout .tbreak, .ps-s_paper .ps-bio { background:#f4ead2; color:#3b2f1c !important; padding:14px; border-radius:6px; font-family:Georgia, serif; box-shadow:inset 0 0 20px rgba(120,90,40,.28); text-shadow:none; }
.ps-s_neon #proabout .tbreak, .ps-s_neon .ps-bio { color:#fff !important; text-shadow:0 0 6px var(--ps-ac, #00f0ff), 0 0 16px var(--ps-ac, #00f0ff); }

/* ---------- the cover behind the whole profile (Edit profile > Images, or the Profile Store tab) ---------- */
.ps_root.ps-bgall { background-size:cover; background-position:center; background-repeat:no-repeat; }
.ps-bgall .modal_wrap_top, .ps-bgall .ps-pv-cover { background:transparent !important; }
.ps-bgall .modal_zone, .ps-bgall .pro_menu_wrap { background:rgba(10,10,16,.52) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; }
.ps-bgall .sub_text, .ps-bgall .prodata { color:rgba(255,255,255,.85) !important; }
.ps-bgall .modal_menu { background:transparent !important; }

/* ---------- panel looks (the info and about areas) ---------- */
.ps-p_dark .modal_zone, .ps-p_dark .pro_menu_wrap { background:#0b0b10 !important; color:#e8e8f0; }
.ps-p_glass .modal_zone, .ps-p_glass .pro_menu_wrap { background:rgba(14,14,22,.5) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; }
.ps-p_frost .modal_zone, .ps-p_frost .pro_menu_wrap { background:rgba(255,255,255,.14) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; }
.ps-p_paper .modal_zone, .ps-p_paper .pro_menu_wrap { background:#f6f1e7 !important; color:#2b2b2b; }
.ps-p_paper .sub_text, .ps-p_paper .prodata { color:#555 !important; }
.ps-p_tint .modal_zone, .ps-p_tint .pro_menu_wrap { background:#1a1530 !important; color:#fff; }
@supports (color:color-mix(in srgb, red 50%, blue)) { .ps-p_tint .modal_zone, .ps-p_tint .pro_menu_wrap { background:color-mix(in srgb, var(--ps-ac, #8b5cf6) 24%, #0d0d12) !important; } }
.ps-p_cards .modal_zone .proitem { background:rgba(127,127,127,.16); border-radius:10px; margin-bottom:6px; padding:8px 12px; border:0 !important; }

/* store window: preview pieces and the extra controls */
.ps-pv .modal_menu { padding:6px 10px; }
.ps-pv .modal_zone { padding:10px 14px; font-size:12px; }
.ps-pv .proitem { padding:4px 0; }
.ps-pv .ps-bio { margin-top:8px; line-height:1.4; }
.ps-pv .pro_name { font-size:20px; font-weight:700; width:auto; display:block; }
.ps-pv .pro_mood { font-size:12px; font-weight:700; margin-top:3px; }
.ps-pv .modal_menu ul { margin:0; padding:0; list-style:none; }
.ps-pv-cover { min-height:0; }
.ps-rainbowdot { background:conic-gradient(#ff3b3b, #ffb020, #ffee33, #38e07a, #3aa0ff, #b04bff, #ff3b3b); }
.ps-pn { width:84px; height:44px; border-radius:8px; overflow:hidden; background:#23232b; }
.ps-pn .modal_zone { height:100%; padding:6px; font-size:11px; display:flex; align-items:center; justify-content:center; }
.ps-colorbox { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; padding:10px; border-radius:10px; background:rgba(127,127,127,.12); font-size:12px; }
.ps-colorbox input[type=color] { width:38px; height:28px; padding:0; border:0; background:none; vertical-align:middle; cursor:pointer; }
.ps-cat[disabled] { opacity:.5; cursor:default; }