/* ═══════════════════════════════════════════════════════════════
   Svartr cosmetics — name effects · avatar frames · name badges
   Solid colours + real glow + particle layers (pseudo-elements).
   ═══════════════════════════════════════════════════════════════ */
@property --fxa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes fxSpin { to { --fxa: 360deg; } }
@keyframes fxShine { 0%, 15% { background-position: 100% 50%; } 70%, 100% { background-position: 0% 50%; } }
@keyframes fxPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes fxSway { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }
@keyframes fxFlicker { 0%, 100% { opacity: 1; } 91% { opacity: 1; } 92% { opacity: .5; } 93% { opacity: 1; } 95% { opacity: .7; } 96% { opacity: 1; } }
@keyframes fxGlitchA { 0%, 100% { transform: none; } 8% { transform: translate(-2px, 0); } 10% { transform: translate(2px, -1px); } 12% { transform: none; } 55% { transform: translate(1px, 1px); } 57% { transform: translate(-3px, 0); } 59% { transform: none; } }
@keyframes fxGlitchB { 0%, 100% { transform: none; } 20% { transform: translate(2px, 0); } 22% { transform: translate(-2px, 1px); } 24% { transform: none; } 70% { transform: translate(-1px, 0); } 72% { transform: translate(3px, -1px); } 74% { transform: none; } }

/* particle motion — every layer travels exactly one tile so the loop is seamless */
@keyframes fxSnowA { from { background-position: 0 0, 7px 0, 13px 0; } to { background-position: 0 24px, 7px 30px, 13px 38px; } }
@keyframes fxSnowB { from { background-position: 3px 0, 11px 0; } to { background-position: 3px 20px, 11px 28px; } }
@keyframes fxRise { from { background-position: 0 0, 9px 0; } to { background-position: 0 -26px, 9px -34px; } }
@keyframes fxBubble { from { background-position: 0 0, 12px 0; } to { background-position: 0 -30px, 12px -40px; } }
@keyframes fxPetal { from { background-position: 0 0, 14px 0; } to { background-position: 30px 30px, 58px 40px; } }
@keyframes fxDrip { from { background-position: 0 0, 15px 0; } to { background-position: 0 34px, 15px 46px; } }
@keyframes fxSmoke { from { background-position: 0% 50%, 100% 50%; } to { background-position: 100% 50%, 0% 50%; } }
@keyframes fxTwinkleA { 0%, 100% { opacity: .15; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes fxTwinkleB { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .1; transform: scale(.75); } }
@keyframes fxBeat {
  0%, 100% { text-shadow: 0 0 2px rgba(255,40,60,.5), 0 0 8px rgba(200,0,20,.35); }
  14% { text-shadow: 0 0 3px rgba(255,90,100,.9), 0 0 14px rgba(255,20,40,.75); }
  28% { text-shadow: 0 0 2px rgba(255,40,60,.55), 0 0 9px rgba(200,0,20,.4); }
  42% { text-shadow: 0 0 3px rgba(255,90,100,.85), 0 0 12px rgba(255,20,40,.65); }
  60% { text-shadow: 0 0 2px rgba(255,40,60,.5), 0 0 8px rgba(200,0,20,.35); } }
@keyframes fxAurora {
  0%, 100% { color: #62f2c4; text-shadow: 0 0 6px rgba(60,240,180,.5), 0 0 14px rgba(60,240,180,.2); }
  33% { color: #74b9ff; text-shadow: 0 0 6px rgba(80,150,255,.55), 0 0 14px rgba(80,150,255,.22); }
  66% { color: #c79bff; text-shadow: 0 0 6px rgba(170,110,255,.55), 0 0 14px rgba(170,110,255,.22); } }
@keyframes fxStorm {
  0%, 62%, 66%, 70%, 100% { color: #bfe3ff; text-shadow: 0 0 5px rgba(50,150,255,.65), 0 0 12px rgba(50,150,255,.3); }
  63%, 68% { color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px #8fd0ff, 0 0 24px rgba(80,170,255,.9); } }
@keyframes fxBoltFlash { 0%, 62%, 64.5%, 67%, 69.5%, 100% { opacity: 0; } 63%, 68% { opacity: 1; } }

/* ───────── name effects ─────────
   Same recipe as Dark Snow for every effect: a strong letter colour, a tight halo built from
   stacked text-shadows (crisp edge + short glow), and dense, tiny, fast particles spawned by app.js. */
.fxn { position: relative; display: inline-block; isolation: isolate; font-weight: 700; text-decoration: none !important; }

/* Steel — brushed metal: light letters, dark engraved edge */
.fxn-steel { color: #dfe5ec !important; text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255,255,255,.15), 0 0 1px #000, 0 0 6px rgba(190,205,225,.25); }
/* Moss — dark green letters, soft green halo, drifting spores */
.fxn-moss { color: #0f1a0b !important; text-shadow: 0 0 1px #d6f5bd, 0 0 3px rgba(140,215,95,.85), 0 0 8px rgba(90,180,60,.35); }
/* Frost — pale ice letters, blue halo, fine ice crystals */
.fxn-frost { color: #f3fbff !important; text-shadow: 0 0 1px #ffffff, 0 0 2px #c4e8ff, 0 0 4px #6fbfff, 0 0 9px rgba(50,140,255,.6), 0 0 18px rgba(40,110,255,.22); }
/* Ember — charred letters burning at the edges, sparks rising */
.fxn-ember { color: #1c0904 !important; text-shadow: 0 0 1px #ffe6b0, 0 0 2px #ffc061, 0 0 4px #ff8a1f, 0 0 9px rgba(255,70,0,.65), 0 0 18px rgba(255,40,0,.25); }
/* Toxin — black-green letters, acid halo, bubbles */
.fxn-toxin { color: #0c1404 !important; text-shadow: 0 0 1px #efffc8, 0 0 2px #c6ff6b, 0 0 4px #8fff2a, 0 0 9px rgba(90,255,0,.5), 0 0 18px rgba(60,220,0,.2); animation: fxFlicker 4.5s linear infinite; }
/* Sakura — white letters, pink halo, petals */
.fxn-sakura { color: #fff6f9 !important; text-shadow: 0 0 1px #ffffff, 0 0 2px #ffc8db, 0 0 4px #ff8fb6, 0 0 9px rgba(255,90,150,.55), 0 0 18px rgba(255,80,140,.2); }
/* Blood Moon — black letters, red halo with a heartbeat, drips */
.fxn-bloodmoon { color: #120203 !important; font-family: Georgia, 'Times New Roman', serif; animation: fxBeat 1.8s ease-in-out infinite; }
/* Void — black letters, violet halo, dark motes */
.fxn-void { color: #0b0614 !important; text-shadow: 0 0 1px #f1e8ff, 0 0 2px #c9b0ff, 0 0 4px #9a5cff, 0 0 9px rgba(110,40,255,.62), 0 0 18px rgba(80,20,220,.26); }
/* Gilded — gold letters, warm halo, gold dust */
.fxn-gold { color: #ffd77a !important; font-family: Georgia, 'Times New Roman', serif; text-shadow: 0 1px 0 #5a3800, 0 0 1px #fff3cc, 0 0 3px #ffc14a, 0 0 8px rgba(255,150,20,.5), 0 0 16px rgba(255,120,0,.2); }
/* Archangel — white letters, white-blue halo, stars + falling light */
.fxn-angel { color: #fff !important; font-family: Georgia, 'Times New Roman', serif; font-style: italic; text-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 4px #d6ecff, 0 0 9px rgba(140,195,255,.75), 0 0 20px rgba(100,160,255,.35); }
/* Aurora — dark letters, halo cycling through northern-light colours */
.fxn.fxn-aurora { color: #04110d; animation: fxAuroraHalo 8s ease-in-out infinite; }
/* Stormcaller — navy letters, electric halo, lightning + driving rain */
.fxn-storm { color: #050c1a !important; animation: fxStormHalo 5s linear infinite; }
.fxn-storm::before { content: ""; position: absolute; inset: -4px -6px; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20' preserveAspectRatio='none'%3E%3Cpath d='M1 3 12 9 8 11 24 15 20 17 34 12 31 10 46 6 43 4 59 2' fill='none' stroke='%23eaf6ff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: 0; animation: fxBoltFlash 5s linear infinite; }
/* Dark Snow — black letters, white halo, dense fast snow */
.fxn-snow { color: #0c0d10 !important; font-family: Georgia, 'Times New Roman', serif; letter-spacing: .02em; text-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 4px rgba(255,255,255,.9), 0 0 9px rgba(220,235,255,.5), 0 0 18px rgba(200,220,255,.2); }
/* Corrupted — RGB split glitch, monospace */
.fxn-glitch { color: #f4f4f4 !important; font-family: Consolas, 'Courier New', monospace; letter-spacing: .02em; }
.fxn-glitch::before, .fxn-glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.fxn-glitch::before { color: #ff2a6d; clip-path: inset(0 0 52% 0); animation: fxGlitchA 2.7s steps(1) infinite; }
.fxn-glitch::after { color: #05d9e8; clip-path: inset(52% 0 0 0); animation: fxGlitchB 2.2s steps(1) infinite; }

@keyframes fxBeat {
  0%, 28%, 60%, 100% { text-shadow: 0 0 1px #ffc0c5, 0 0 2px #ff5a68, 0 0 4px #e0102a, 0 0 9px rgba(200,0,20,.55), 0 0 18px rgba(160,0,10,.2); }
  14% { text-shadow: 0 0 1px #ffe0e3, 0 0 2px #ff8590, 0 0 5px #ff1f3a, 0 0 12px rgba(255,0,30,.8), 0 0 24px rgba(220,0,20,.35); }
  42% { text-shadow: 0 0 1px #ffd2d6, 0 0 2px #ff6f7c, 0 0 5px #f2152f, 0 0 11px rgba(240,0,25,.7), 0 0 22px rgba(200,0,15,.3); }
}
@keyframes fxAuroraHalo {
  0%, 100% { text-shadow: 0 0 1px #e0fff3, 0 0 2px #7dffd2, 0 0 4px #2fe8a8, 0 0 9px rgba(40,230,170,.55), 0 0 18px rgba(30,200,150,.2); }
  33% { text-shadow: 0 0 1px #e6f1ff, 0 0 2px #8fc4ff, 0 0 4px #4a95ff, 0 0 9px rgba(60,130,255,.55), 0 0 18px rgba(50,110,255,.2); }
  66% { text-shadow: 0 0 1px #f4eaff, 0 0 2px #d6b4ff, 0 0 4px #a970ff, 0 0 9px rgba(150,90,255,.55), 0 0 18px rgba(130,70,255,.2); }
}
@keyframes fxStormHalo {
  0%, 62%, 66%, 70%, 100% { text-shadow: 0 0 1px #e3f4ff, 0 0 2px #8fd3ff, 0 0 4px #3aa0ff, 0 0 9px rgba(30,120,255,.6), 0 0 18px rgba(20,90,255,.22); }
  63%, 68% { text-shadow: 0 0 1px #ffffff, 0 0 3px #ffffff, 0 0 6px #bfe6ff, 0 0 14px rgba(120,200,255,.95), 0 0 28px rgba(80,170,255,.5); }
}

/* particle layers (spawned by app.js) — tight box around the name */
.fxp { position: absolute; inset: -3px -4px; pointer-events: none; overflow: hidden; }
.fxp-back { z-index: -1; }
.fxp-front { z-index: 1; }
.fxp i { position: absolute; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); opacity: 0; will-change: transform, opacity; }
.fxp .p-fall { top: 0; animation: fxpFall var(--d) linear var(--dl) infinite; }
.fxp .p-rise { top: 100%; animation: fxpRise var(--d) linear var(--dl) infinite; }
.fxp .p-twinkle { top: var(--y); animation: fxpTwinkle var(--d) ease-in-out var(--dl) infinite; }
@keyframes fxpFall {
  0% { transform: translate(0, calc(var(--s) * -1)) rotate(0deg); opacity: 0; }
  10% { opacity: var(--o); }
  50% { transform: translate(calc(var(--dx) * .5 + var(--sw)), calc(var(--h) * .5)) rotate(calc(var(--r) * .5)); }
  88% { opacity: var(--o); }
  100% { transform: translate(var(--dx), var(--h)) rotate(var(--r)); opacity: 0; }
}
@keyframes fxpRise {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: var(--o); }
  50% { transform: translate(calc(var(--dx) * .5 + var(--sw)), calc(var(--h) * -.5)); }
  100% { transform: translate(var(--dx), calc(var(--h) * -1)); opacity: 0; }
}
@keyframes fxpTwinkle { 0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 45%, 55% { transform: scale(1) rotate(45deg); opacity: var(--o); } }
.fxp .p-petal { border-radius: 70% 0 70% 0; width: calc(var(--s) * 1.6); }
.fxp .p-bubble { background: transparent; border: .8px solid var(--c); }
.fxp .p-drip { border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; height: calc(var(--s) * 2.8); }
.fxp .p-star { border-radius: 0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.fxp .p-spark { box-shadow: 0 0 2px var(--c); }
.fxp .p-rain { border-radius: 1px; width: .8px; height: calc(var(--s) * 5); transform-origin: top; }
.fxp .p-crystal { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ───────── avatar frames ───────── */
.avf { position: relative; display: inline-grid; place-items: center; flex: none; padding: 3px; border-radius: 50%; isolation: isolate; vertical-align: middle; }
.avf > .avatar { position: relative; z-index: 2; box-shadow: 0 0 0 2px #0b0c0e; }
.avf::before, .avf::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.avf::before { z-index: 1; }
.avf::after { z-index: 0; filter: blur(6px); opacity: .35; }
.avf-node { border-radius: 9px; } .avf-l { border-radius: 11px; } .avf-post { border-radius: 11px; padding: 3px; } .avf-xl { border-radius: 14px; padding: 4px; }
.avf-m { padding: 2px; }
.avf-m::after { display: none; }
.avf-obsidian::before { background: linear-gradient(145deg, #6b717b, #111216 38%, #2b2e34 62%, #0b0c0e); }
.avf-obsidian::after { display: none; }
.avf-bronze::before { background: linear-gradient(145deg, #b9a58c, #5b4e40 40%, #9a8872 62%, #3d342b); }
.avf-bronze::after { display: none; }
.avf-frost::before { background: conic-gradient(from var(--fxa), #ffffff, #c9cfd8 20%, #5e646d 42%, #f3f5f8 62%, #8e959f 82%, #ffffff); }
.avf-toxin::before { background: repeating-linear-gradient(135deg, #e9e9eb 0 4px, #141518 4px 8px); }
.avf-ember::before { background: conic-gradient(from var(--fxa), #2a2b2f, #8d9097 20%, #18191c 40%, #5d6067 60%, #0f1012 80%, #2a2b2f); }
.avf-void::before { background: conic-gradient(from var(--fxa), #000000, #ffffff 12%, #1a1a1a 30%, #000000 50%, #d9d9d9 66%, #111111 82%, #000000); }
.avf-neon::before { background: conic-gradient(from var(--fxa), #ffffff, #3a3c41 25%, #d5d7db 50%, #3a3c41 75%, #ffffff); }
.avf-gold::before { background: linear-gradient(120deg, #6e5c36, #cbb98d 25%, #ece3cc 38%, #a28e5f 52%, #6e5c36 70%, #cbb98d 88%, #6e5c36); background-size: 250% 100%; background-position: 50% 50%; }
.avf-halo::before { background: conic-gradient(from var(--fxa), #ffffff, #c9d2df 20%, #5d6470 45%, #e9eef5 65%, #8a93a0 85%, #ffffff); }
.avf-halo::after { display: none; }
/* premium + "animate my frame" on */
.avf-anim.avf-frost::before { animation: fxSpin 9s linear infinite; }
.avf-anim.avf-ember::before { animation: fxSpin 3.2s linear infinite; }
.avf-anim.avf-void::before { animation: fxSpin 7s linear infinite; }
.avf-anim.avf-neon::before { animation: fxSpin 3s linear infinite; }
.avf-anim.avf-toxin::before { animation: fxFlicker 3.4s linear infinite; }
.avf-anim.avf-gold::before { animation: fxShine 3.6s ease-in-out infinite; }
.avf-anim.avf-halo::before { animation: fxSpin 8s linear infinite; }
.avf-anim.avf-halo::after { display: block; inset: -2px; background: conic-gradient(from var(--fxa), transparent 0 80%, rgba(255,255,255,.9) 92%, transparent); filter: blur(3px); opacity: 1; animation: fxSpin 2.6s linear infinite; }



/* ═══════════════════ shop ═══════════════════ */
.shop-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; border-radius: var(--r-l); border: 1px solid #2e2e2e; background:
  radial-gradient(60% 120% at 100% 0%, rgba(124,58,237,.22), transparent 60%),
  radial-gradient(50% 120% at 0% 100%, rgba(59,130,246,.16), transparent 60%), var(--surface); flex-wrap: wrap; }
.sh-kicker { display: inline-flex; align-items: center; gap: 6px; color: #c4b5fd; font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.shop-hero h2 { font-size: 28px; font-weight: 700; color: #fff; margin: 4px 0 6px; letter-spacing: -.3px; }
.shop-hero p { margin: 0; color: var(--text-2); max-width: 560px; }
.sh-wallet { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 12px 16px; background: rgba(0,0,0,.3); border: 1px solid var(--line-2); border-radius: var(--r-m); }
.sh-wallet span { font-size: 12.5px; color: var(--muted); }
.sh-wallet b { font-size: 24px; color: #fff; } .sh-wallet small { font-size: 13px; color: var(--muted); font-weight: 500; }
.sh-wallet a { font-size: 13px; }
.tabs--pill { background: none; border: 0; padding: 0; gap: 6px; }
.tabs--pill a { border: 1px solid #2e2e2e; border-radius: 99px; padding: 7px 14px; background: var(--surface); display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.tabs--pill a.on { background: #fff; color: #0b0c0e; border-color: #fff; }
.tab-n { font-size: 11.5px; background: rgba(255,255,255,.08); padding: 1px 7px; border-radius: 99px; }
.tabs--pill a.on .tab-n { background: rgba(0,0,0,.1); }
.shop-desc { color: var(--muted); margin: 10px 2px 0; }
.ic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ic { --rc: #8b9099; background: var(--surface); border: 1px solid #2e2e2e; border-radius: var(--r-l); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, border-color .15s, box-shadow .15s; position: relative; }
.ic::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--rc); opacity: .9; z-index: 3; }
.ic:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rc) 55%, #2e2e2e); box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--rc) 25%, transparent); }
.r-common { --rc: #9aa1ab; } .r-rare { --rc: #3b8cff; } .r-epic { --rc: #a855f7; } .r-legendary { --rc: #f5a524; } .r-mythic { --rc: #ff3d71; }
.ic-stage { height: 150px; display: grid; place-items: center; background: radial-gradient(80% 90% at 50% 0%, color-mix(in srgb, var(--rc) 14%, transparent), transparent 70%), repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 8px, transparent 8px 16px), #0a0b0d; border-bottom: 1px solid var(--line); overflow: hidden; }
.ic-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.ic-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ic-rarity { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--rc); }
.ic-plus { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: #c4b5fd; background: rgba(124,58,237,.15); padding: 1px 6px; border-radius: 3px; }
.ic-plus .ico { width: 11px; height: 11px; }
.ic-owned { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ok); background: rgba(34,197,94,.12); padding: 1px 6px; border-radius: 3px; }
.ic-name { font-size: 17px; font-weight: 650; color: #fff; margin-top: 4px; }
.ic-desc { margin: 3px 0 12px; color: var(--muted); font-size: 13.5px; flex: 1; }
.ic-state { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px; font-size: 13px; font-weight: 600; border-radius: var(--r-s); }
.ic-on { color: var(--ok); background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); }
.btn-plus { background: rgba(124,58,237,.18); border-color: rgba(124,58,237,.45); color: #d9ccff; }
.btn-plus:hover { background: rgba(124,58,237,.3); color: #fff; }

/* previews */
.pv { display: grid; place-items: center; }
.pv-name { font-size: 24px; }
.pv-name .username { font-weight: 700; }

/* ═══════════════════ inventory ═══════════════════ */
.inv { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.inv-main { display: flex; flex-direction: column; gap: 14px; }
.inv-slot { background: var(--surface); border: 1px solid #2e2e2e; border-radius: var(--r-s); }
.inv-slot header { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 14px; background: var(--head); border-bottom: 1px solid var(--line); border-radius: var(--r-s) var(--r-s) 0 0; }
.inv-slot h3 { font-size: 15px; color: #fff; }
.inv-slot header span { color: var(--muted); font-size: 13px; }
.inv-row { display: flex; gap: 10px; padding: 12px; overflow-x: auto; }
.inv-opt { flex: none; }
.inv-opt button, a.inv-opt { --rc: #3a3b40; width: 136px; display: flex; flex-direction: column; align-items: stretch; background: #0a0b0d; border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 0; cursor: pointer; overflow: hidden; color: var(--text); text-decoration: none !important; transition: border-color .12s, transform .12s; }
.inv-opt.r-common button { --rc: #9aa1ab; } .inv-opt.r-rare button { --rc: #3b8cff; } .inv-opt.r-epic button { --rc: #a855f7; } .inv-opt.r-legendary button { --rc: #f5a524; } .inv-opt.r-mythic button { --rc: #ff3d71; }
.inv-opt button:hover, a.inv-opt:hover { border-color: var(--rc); transform: translateY(-1px); }
.inv-opt.is-on button { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,.35); }
.inv-pv { height: 92px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.inv-pv .pv { width: 100%; height: 100%; color: var(--muted); font-size: 13px; }
.inv-pv .pv-name { font-size: 16px; }
.inv-pv .avatar.av-post { width: 56px; height: 56px; font-size: 26px; border-radius: 6px; }
.inv-pv .avf-post { padding: 3px; border-radius: 9px; }
.inv-name { padding: 7px 9px 0; font-size: 13.5px; font-weight: 600; text-align: left; }
.inv-r { padding: 0 9px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rc); text-align: left; }
.inv-none .inv-r, .inv-more .inv-r { color: var(--muted); }
.inv-more .pv .ico { width: 24px; height: 24px; }
.inv-side { position: sticky; top: 12px; }
.showcase { border: 1px solid #2e2e2e; border-radius: var(--r-s); overflow: hidden; background: var(--surface); margin-top: 6px; }
.sc-cover { height: 96px; background: radial-gradient(120% 140% at 0% 0%, #23262d 0%, #15161a 55%, #0f1013 100%); }
.sc-main { display: flex; gap: 12px; align-items: flex-end; padding: 0 12px 12px; margin-top: -40px; }
.sc-main .avatar.av-xl { width: 84px; height: 84px; font-size: 38px; border: 3px solid var(--surface); }
.sc-main .avf-xl { padding: 4px; border-radius: 12px; }
.sc-main .avf-xl .avatar { border: 0; }
.sc-name { font-size: 19px; font-weight: 700; }
.sc-main .ubanners { flex-direction: row; flex-wrap: wrap; margin: 6px 0 0; }
.sc-post { padding: 0 10px 12px; }
.sc-post .message { grid-template-columns: 120px minmax(0, 1fr); }
.sc-post .avatar.av-post { width: 64px; height: 64px; font-size: 30px; }
.sc-post .mu-name { font-size: 14px; }
.sc-post .message-body { font-size: 13.5px; padding: 8px 0; }

/* ═══════════════════ small polish fixes ═══════════════════ */
.mu-pairs dd { white-space: nowrap; }
.ubanner { white-space: nowrap; font-size: 11px; }
.message-user .ubanners { margin: 7px 8px 0; }
.nav-menu { width: 360px; }
.mh-cover { height: 160px; }
.mh-main { margin-top: 0; padding-top: 14px; align-items: flex-start; }
.mh-av { margin-top: -86px; }
.mh-info { padding-top: 2px; }
.mh-actions { padding-top: 6px; }
.btn-cta:disabled { background: #1c2230; border-color: #2a3242; color: #7d8597; opacity: 1; }
@media (max-width: 680px) { .mh-cover { height: 110px; } .mh-av { margin-top: -60px; } }

@media (max-width: 1000px) { .inv { grid-template-columns: 1fr; } .inv-side { position: static; } }
@media (max-width: 680px) { .ic-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .shop-hero h2 { font-size: 22px; } }

/* ═══════════════════ shop v2 ═══════════════════ */
.sk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.sk-tabs { display: inline-flex; gap: 2px; padding: 3px; background: #121316; border: 1px solid #24262b; border-radius: 10px; }
.sk-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 7px; color: var(--text-2); font-weight: 550; font-size: 14.5px; text-decoration: none !important; }
.sk-tabs a:hover { color: #fff; background: rgba(255,255,255,.04); }
.sk-tabs a.on { background: #23252b; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }
.sk-tabs .tab-n { font-size: 11.5px; color: var(--muted); background: rgba(255,255,255,.06); padding: 1px 7px; border-radius: 99px; }
.sk-wallet { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; background: #121316; border: 1px solid #24262b; border-radius: 10px; }
.sk-wallet-n { font-size: 18px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.sk-wallet-c { color: var(--muted); font-size: 13px; margin-right: 6px; }
.sk-wallet-a { font-size: 13px; color: var(--text-2); padding-left: 10px; border-left: 1px solid #2a2c31; }
.sk-wallet-a:hover { color: #fff; }
.sk-lead { color: var(--muted); margin: 8px 2px 14px; font-size: 14px; }

.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.sk { --rc: #8b9099; position: relative; display: flex; flex-direction: column; background: #111215; border: 1px solid #222429; border-radius: 14px; overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sk:hover { border-color: #33363c; }
.sk.r-common { --rc: #9aa1ab; } .sk.r-rare { --rc: #4c95ff; } .sk.r-epic { --rc: #b06cff; } .sk.r-legendary { --rc: #f5a524; } .sk.r-mythic { --rc: #ff3d71; }
.sk.is-equipped { border-color: rgba(34,197,94,.45); }
.sk-stage { position: relative; height: 158px; display: grid; place-items: center; overflow: hidden;
  background: #0c0d0f;
  border-bottom: 1px solid #1d1f23; }
.sk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sk-rar { flex: none; font-size: 12px; font-weight: 600; color: var(--rc); padding: 1px 7px; border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent); border-radius: 5px; }
.sk-plus { position: absolute; right: 10px; top: 10px; color: #8f8a9e; }
.sk-plus .ico { width: 15px; height: 15px; }
.sk-info { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.sk-name { margin: 0; font-size: 16.5px; font-weight: 650; color: #fff; }
.sk-desc { margin: 3px 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.45; flex: 1; }
.sk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sk-foot form { margin: 0; }
.sk-price { font-weight: 700; color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.sk-price small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.sk-owned { color: var(--ok); font-size: 13px; font-weight: 650; }
.sk-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid #2c2f35; background: #1a1c20; color: #e9e9ea; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none !important; transition: background-color .12s, border-color .12s; }
.sk-btn:hover { background: #23262b; border-color: #3a3d44; color: #fff; }
.sk-btn--buy { background: #fff; color: #0b0c0e; border-color: #fff; }
.sk-btn--buy:hover { background: #e6e6e6; color: #0b0c0e; border-color: #e6e6e6; }
.sk-btn:disabled { opacity: .4; cursor: not-allowed; }
.sk-btn--plus { color: #d9ccff; border-color: rgba(124,58,237,.45); background: rgba(124,58,237,.14); }
.sk-btn .ico { width: 14px; height: 14px; }
.sk-state { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-size: 13.5px; font-weight: 650; }
.sk-state .ico { width: 15px; height: 15px; }

/* in-context name preview: avatar + name + rank, like a post header */
.pv-name { font-size: inherit; }
.pv-who { display: inline-flex; align-items: center; gap: 12px; }
.pv-who .avatar { width: 46px; height: 46px; font-size: 21px; }
.pv-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pv-txt .username { font-size: 21px; line-height: 1.1; }
.pv-sub { font-size: 12.5px; color: var(--muted); }
.inv-pv .pv-who { gap: 7px; }
.inv-pv .pv-who .avatar { width: 26px; height: 26px; font-size: 12px; }
.inv-pv .pv-txt .username { font-size: 14px; }
.inv-pv .pv-sub { display: none; }
@media (max-width: 680px) { .sk-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .sk-stage { height: 130px; } .pv-txt .username { font-size: 17px; } }