/* ============================================================================
   FORRE.NU — NYA TEMAT · PROFILEN (?page=profile/{namn})
   Källa: design-proposals/nytt-forre-2026-10-20.html, riktning C:
     NY.phead(…,'c')  huvudet — personen och spelaren sida vid sida
     C.vs             B:s match (bara på någon annans profil)
     A.vagg / C.kort  väggen bredvid spelarkortet
   Markup: themes/forre_ny/views/pages/profile/view.php · JS: themes/forre_ny/js/ny-profil.js

   ★ LADDAS BARA I forre_ny på rutten profile (app/Helpers/PulseAssets.php), med PJAX.
   ★ PREFIX: npf- (profilen) och nvs- (matchen). Byggklossarna n-* och panelerna
     np-* kommer ur ny.css. Väggkorten ritas av forre_pulse:s wall-post-card.php —
     deras grund (pulse-wall.css, pulse-reactions.css, pulse-unreal.css) laddas
     fortfarande på rutten, här anpassas de bara inne i .npf-post.
     pgal-* (bilderna) och plsel/plchip (statistiken) behåller sina namn: JS:en
     som ritar dem (vyn, pulse.js) väljer på just de klasserna.
   ★ TOKENS: bara forre_pulse:s + ny.css-tilläggen. Inga egna färger utöver
     plattformarnas egna (Twitch, YouTube, Kick, Discord) — de är data, inte tema.
   ★ Inga lodräta streck: kolumner skiljs med luft.
   ============================================================================ */

.npf{display:flex;flex-direction:column;min-width:0}
:where(.npf) button{font:inherit}
.npf [hidden]{display:none!important}
.npf .n-av.s104{--s:104px;--f:30px}
.npf .np-panel.card{box-shadow:none}

/* ---------------------------------------------------------------- 1. HUVUDET */
.npf-ph{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0}
.npf-cov{position:relative;height:84px;background:var(--inset) center 32%/cover no-repeat}
.npf-cov.is-bare{background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.npf-covstd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;color:var(--accent);padding:0 120px;min-width:0}
.npf-cov:not(.is-bare)>.npf-covstd{display:none}
.npf-covstd svg{width:48px;height:48px;display:block;flex:none}
.npf-covnm{font:800 30px/1 var(--hd);letter-spacing:.08em;color:var(--ink);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;background:none;border:0;padding:0;cursor:default}
button.npf-covnm{cursor:copy}
button.npf-covnm:hover{opacity:1}
/* omslagets egen knapp (byt omslag) och kanalerna — samma platser som i dag */
.npf-covx{position:absolute;left:12px;top:10px;display:flex;gap:6px;z-index:2}
.npf-covx .n-btn{background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(6px)}
.npf-covx .n-btn.busy{opacity:.7;pointer-events:none}
.npf-covx .n-btn.is-error{border-color:var(--danger);color:var(--danger)}
.npf-soc{position:absolute;right:12px;bottom:10px;display:flex;gap:4px;z-index:2}
.npf-soc>a,.npf-soc>button{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r);color:var(--sc,var(--ink2));background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid var(--line);font-size:14px;text-decoration:none;cursor:pointer;padding:0}
.npf-soc>a:hover,.npf-soc>button:hover{border-color:var(--line2)}
.npf-soc svg,.npf-soc img{width:15px;height:15px;display:block}
.npf-soc i{font-size:14px}

/* Korten fyller raden (Kenta 21 okt, en annan spelares profil: "tomt space som inte fixas" —
   PERSONEN slutade 84 px och SPELAREN 59 px ovanför flikarna när presentationen till vänster
   var längre). Fälten fördelas över höjden, "På FORRE" och "Bästa läge" står i botten. */
.npf-g3{display:grid;grid-template-columns:300px minmax(0,1.12fr) minmax(0,1fr);gap:12px;padding:0 22px 16px;align-items:stretch}
.npf-id{margin-top:-50px;display:flex;flex-direction:column;align-items:flex-start;min-width:0;position:relative}
.npf-avw{position:relative;display:inline-flex;margin-bottom:10px;border-radius:50%;box-shadow:0 0 0 5px var(--card)}
.npf-avw>.n-av{box-shadow:none;cursor:zoom-in;outline:0!important}   /* bocken vid namnet är märket — ingen ring på avataren (forre_pulse 2026-08-07) */
.npf-avw>.kav-med{position:absolute;right:2px;bottom:2px}
.npf-who{min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:flex-start}
.npf-who h1{font:700 27px/1.05 var(--hd);margin:0;display:flex;align-items:center;gap:9px;letter-spacing:-.005em;color:var(--ink);max-width:100%;min-width:0}
.npf-who h1>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.npf-who h1 .uc-bev{width:18px;height:18px;flex:none}
.npf-who h1 .stab-d{font-family:var(--ui);letter-spacing:0}
.npf-who .sub{font-size:13px;color:var(--ink2);margin-top:5px;line-height:1.4}
.npf-who .sub i{font-size:11px;color:var(--accent)}
.npf-who .sub.ep{margin-top:2px;color:var(--dim);font-size:12.5px}
.npf-bio{display:inline-flex;align-items:flex-start;gap:7px;font:500 14.5px/1.3 var(--ui);color:var(--ink);margin-top:8px;max-width:100%}
.npf-bio>i{color:var(--accent);font-size:15px;flex:none;margin-top:1px}
.npf-bio>span{min-width:0;overflow-wrap:anywhere}
.npf-ln{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.npf-st{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--live);background:var(--live-wash);border-radius:999px;padding:5px 11px;text-decoration:none;white-space:nowrap}
.npf-st.blue{color:var(--accent-ink);background:var(--accent-wash)}
.npf-st i.bi{font-size:12px}
a.npf-st:hover{filter:brightness(.97)}
.npf-cupch{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--hw-ink);background:var(--hw-wash);border-radius:999px;padding:3px 11px 3px 3px;text-decoration:none;max-width:100%;min-width:0}
.npf-cupch>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.npf-cupch .pm{width:20px;height:20px;border-radius:50%;background:#000 center/cover;flex:none}
.npf-cupch b{color:var(--ink)}
.npf-acts{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;align-items:center;position:relative}
.npf-acts .pmenu{margin-left:0}
.npf-acts .pmenu-dd{top:34px;left:0;right:auto}
.npf-acts .n-btn.ico{color:var(--accent-ink)}
.npf-vanner{cursor:default}
.npf-vanner:hover{border-color:var(--line2)!important;color:var(--ink)!important}
.npf-mob{display:none}
.npf-fel{flex-basis:100%;font-size:12px;color:var(--danger)}

/* personen och spelaren — två halvor i insatsfärgen */
.npf-half{background:var(--inset);border-radius:10px;padding:12px 14px;min-width:0;margin-top:14px;display:flex;flex-direction:column}
.npf-pers>.npf-fx{flex:1;align-content:space-evenly}
.npf-play>.npf-rk2{flex:1}
.npf-half>.n-ml{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.npf-half>.n-ml>span{text-transform:none;letter-spacing:0;font-weight:500;font-size:11px;color:var(--faint);display:flex;gap:5px;align-items:center;margin-left:auto}
.npf-half>.n-ml>span i{font-size:9px}
.npf-half>.n-ml .n-lk{margin-left:auto;text-transform:none;letter-spacing:0;font-size:12px}
.npf-fx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px 14px;margin:0}
.npf-fx>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.npf-fx dt{display:flex;align-items:center;gap:6px;font:600 10px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.npf-fx dt>i:first-child{font-size:12px;color:var(--ink2)}
.npf-fx dt .vis{font-size:9px;color:var(--faint)}
.npf-fx dd{margin:0;font:600 14px/1.2 var(--ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-fx dd.las{display:flex;align-items:center;gap:5px;font-weight:500;font-size:12.5px;color:var(--dim)}
.npf-fx dd.las i{font-size:10px}
.npf-pa{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2);line-height:1.4}
.npf-pa>i{color:var(--accent-ink);flex:none;margin-top:1px}
.npf-pa a{color:inherit;text-decoration:none}
.npf-pa a:hover{color:var(--accent-ink);text-decoration:underline}
.npf-kan{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;color:var(--ink2);flex-wrap:wrap}
.npf-kan>i{color:var(--live);margin-right:2px}
.npf-kan>b{color:var(--ink);font-weight:600}
.npf-kan small{color:var(--dim);font-size:11.5px}
.npf-kan small.lv{color:var(--live);font-weight:600}
.npf-kan .n-btn{margin-left:auto}
.npf-kan.own>span{flex:1;min-width:0;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-kan.own b{color:var(--ink)}
/* plattformsbrickan är skalets .n-pfb (ny.css) — en för hela huset; raden har eget gap */
.npf-kan .n-pfb{margin-right:0;vertical-align:0}

.npf-rk2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px}
.npf-rk2.en{grid-template-columns:minmax(0,1fr)}
.npf-rk2>div,.npf-rk2>a{display:flex;align-items:center;gap:11px;min-width:0;background:var(--card);border-radius:8px;padding:9px 11px;color:inherit;text-decoration:none}
.npf-rk2>a:hover{box-shadow:0 0 0 1px var(--line2) inset}
.npf-rk2>*>div{min-width:0;flex:1}
.npf-rk2 small{display:block;font:600 9.5px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.npf-rk2 b{display:block;font:700 16px/1.1 var(--hd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.npf-rk2 .n-prog{margin:5px 0 3px}
.npf-rk2 em{display:block;font-style:normal;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-rk2 .big{font:700 34px/1 var(--hd);color:var(--ink);letter-spacing:-.01em;flex:none;overflow:visible}
.npf-rk2 .n-emb{width:46px;height:46px;flex:none}
.npf-st4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.npf-st4.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.npf-np+.npf-st4{margin-top:10px}
.npf-st4>span{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:8px;background:var(--card);min-width:0}
.npf-st4 small{font:600 9.5px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-st4 b{font:700 20px/1 var(--hd);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-best{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px;margin-top:10px}
/* ★ DUELLREKORDET (2026-10-23, duellsidan C — koppling 5): en ruta bland siffrorna, klickbar. */
.npf-st4.fem{grid-template-columns:repeat(5,minmax(0,1fr))}
.npf-best.tre{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr)}
.npf-du{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:8px;background:var(--card);min-width:0;color:inherit;text-decoration:none}
.npf-du:hover{box-shadow:0 0 0 1px var(--line2) inset}
.npf-du small{font:600 9.5px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-du b{font:700 20px/1 var(--hd);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-du em{font-style:normal;font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-st4.fem>span,.npf-st4.fem>.npf-du{padding:8px 8px}
.npf-best .npf-du b{font-size:16px;line-height:1.15}
.npf-best>span{display:flex;flex-direction:column;gap:3px;padding:8px 11px;border-radius:8px;background:var(--card);min-width:0}
.npf-best small{font:600 9.5px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.npf-best b{font:700 16px/1.15 var(--hd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.npf-best b .n-num{color:var(--accent-ink)}
.npf-best em{font-style:normal;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-np{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:8px;padding:12px}
.npf-np+.npf-rk2{margin-top:10px}
.npf-np>i{font-size:20px;color:var(--dim)}
.npf-np b{display:block;font-size:14px;color:var(--ink)}
.npf-np small{display:block;font-size:12px;color:var(--dim);margin-top:2px;line-height:1.35}

/* flikarna */
.npf-tabs{display:flex;gap:4px;padding:0 18px;border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.npf-tabs::-webkit-scrollbar{display:none}
.npf-tabs a{padding:13px 10px 12px;font:500 13.5px/1 var(--ui);color:var(--ink2);position:relative;text-decoration:none;white-space:nowrap;cursor:pointer;flex:none}
.npf-tabs a span{color:var(--dim);font-size:12px;margin-left:3px}
.npf-tabs a:hover{color:var(--ink)}
.npf-tabs a.on{color:var(--ink);font-weight:600}
.npf-tabs a.on:after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}

/* ---------------------------------------------------------------- 2. MATCHEN (B:s, i A:s material) */
.nvs{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 22px;margin-top:16px;min-width:0}
.nvs-h{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}
.nvs-sd{display:flex;align-items:center;gap:12px;min-width:0}
.nvs-sd.hen{justify-content:flex-end;text-align:right}
.nvs-sd b{display:block;font:700 18px/1.1 var(--hd);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nvs-sd small{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--dim);margin-top:3px}
.nvs-sd small .n-emb{width:18px;height:18px}
.nvs-sd.hen small{justify-content:flex-end}
.nvs-sd>div{min-width:0}
.nvs-mid{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;max-width:560px}
.nvs-sc{font:700 38px/.95 var(--hd);color:var(--ink)}
.nvs-mid>span{font-size:13px;color:var(--ink2)}
.nvs-mid>.nvs-men{font-size:14px;line-height:1.4}
.nvs-men b{color:var(--ink)}
.nvs-chs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.nvs-chs>span,.nvs-chs>a{font-size:11.5px;color:var(--ink2);background:var(--inset);border-radius:999px;padding:4px 9px;text-decoration:none}
.nvs-chs>a:hover{color:var(--accent-ink)}
.nvs-ab{display:flex;gap:6px;margin-top:2px;align-items:center;flex-wrap:wrap;justify-content:center}
.nvs-ab [data-nitva-slot]{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.nvs-r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 26px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.nvs-rr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;position:relative}
.nvs-rr b{font:700 15px/1 var(--hd);color:var(--ink2)}
.nvs-rr b:last-of-type{text-align:right}
.nvs-rr b.win{color:var(--ink)}
.nvs-rr small{position:absolute;left:50%;top:-1px;transform:translateX(-50%);font:600 10px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);background:var(--card);padding:0 8px;white-space:nowrap}
.nvs-bars{display:flex;gap:4px;height:8px;margin-top:12px}
.nvs-bars i{display:block;height:8px;border-radius:4px;min-width:4px}
.nvs-bars i.l{background:var(--accent)}
.nvs-bars i.r{background:var(--line2)}
.nvs.ny{padding:16px 20px}
.nvs-n{display:flex;align-items:center;gap:16px}
.nvs-n>div:not(.nvs-ab){flex:1;min-width:0}
.nvs-n>div>b{display:block;font-size:16px;color:var(--ink)}
.nvs-n>div>span{font-size:13.5px;color:var(--ink2)}
.nvs-n>div>span b{display:inline;font-size:inherit;color:var(--ink)}
.nvs-n .n-fp>.n-av+.n-av{margin-left:-12px}
.nvs-n .nvs-ab{margin:0;flex:none}
.nvs-cup{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.nvs-cup .pcu-pf{margin:0}

/* ---------------------------------------------------------------- 3. SLUTFÖR PROFILEN (ägaren, tills 100 %) */
.npf-compl{margin-top:16px}
.npf-compl .n-prog{margin:0 0 12px}
.npf-pcl{display:flex;flex-direction:column;gap:6px}
.npf-pcr{display:flex;align-items:center;gap:6px;border-radius:8px;background:var(--inset)}
.npf-pcr.is-busy{opacity:.5;pointer-events:none}
.npf-pcr>a{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:8px 11px;color:var(--ink);text-decoration:none;font-size:13px;font-weight:600}
.npf-pcr>a:hover{color:var(--accent-ink)}
.npf-pcr>a>i{color:var(--dim);font-size:12px}
.npf-pcr>a>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-pcr>a>em{font-style:normal;font-size:11px;font-weight:700;color:var(--gold)}
.npf-pcr>.n-btn{margin-right:6px;color:var(--dim)}
.npf-pcu{display:flex;align-items:center;gap:8px;padding:6px 11px;border-radius:8px;border:1px dashed var(--line2);font-size:12.5px;color:var(--dim)}
.npf-pcu .n-btn{margin-left:auto}
.npf-pcn{margin:10px 0 0;font-size:11.5px;color:var(--dim)}

/* ---------------------------------------------------------------- 4. VÄGGEN OCH KORTET */
.npf-g{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:20px;align-items:start;margin-top:20px}
.npf-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.npf-gab{display:flex;gap:8px;padding:0 18px 16px}
.npf-wc{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line)}
.npf-wc .in{flex:1;min-width:0;height:36px;border-radius:18px;background:var(--inset);display:flex;align-items:center;padding:0 14px;color:var(--dim);font-size:13.5px;border:0;cursor:text;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-wc .in:hover{background:color-mix(in srgb,var(--inset) 80%,var(--line))}
.npf-wc>button:not(.in){width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;color:var(--dim);font-size:16px;border-radius:var(--r);cursor:pointer;flex:none}
.npf-wc>button:not(.in):hover{color:var(--accent-ink);background:var(--accent-wash)}
.npf-wall .pcu{margin:12px 18px 0}
.npf-wall .pcu-hr{display:none}
.npf-wall .pcu-vf{margin:0 18px 12px}
.npf-wl{display:flex;flex-direction:column;padding:6px 0}

/* det som HÄNDER — en rad var */
.npf-mom{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 18px}
.npf-mi{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--inset);color:var(--ink2);font-size:14px;flex:none}
.npf-mi.gold{color:var(--gold);background:color-mix(in srgb,var(--gold) 13%,var(--card))}
.npf-mi.red{color:var(--danger);background:color-mix(in srgb,var(--danger) 11%,var(--card))}
.npf-mi.blue{color:var(--accent-ink);background:var(--accent-wash)}
.npf-mi.green{color:var(--live);background:var(--live-wash)}
.npf-mom>div{min-width:0}
.npf-mom>div>b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.npf-mom>div>b a{color:inherit;text-decoration:none}
.npf-mom>div>b a:hover{color:var(--accent-ink)}
.npf-mom>div>small{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.npf-mk{display:flex;gap:6px;align-items:center}
.npf-mk [data-nt-rx].on{background:var(--accent-wash);border-color:transparent;color:var(--accent-ink)}
.npf-mk .n-btn.dn{color:var(--dim)}

/* det folk SÄGER — forre_pulse:s kort (wall-post-card.php) som mockupens rad */
.npf-post{padding:10px 18px 14px;min-width:0}
.npf-post>.card.post{background:transparent;border:0;box-shadow:none;border-radius:0;margin:0;padding:0!important;display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:12px;align-items:start}
.npf-post .post .ph{display:contents}
.npf-post .post .ph>.av{grid-column:1;grid-row:1/span 12;width:36px;height:36px}
.npf-post .post .ph>div:not(.pmenu){grid-column:2;grid-row:1;min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px;row-gap:2px;padding-top:1px}
.npf-post .post .ph .nm{font-size:14px;font-weight:700;min-width:0}
.npf-post .post .ph .t{margin:0 0 0 auto;font-size:12px;color:var(--dim);white-space:nowrap}
.npf-post .post .ph>.pmenu{grid-column:3;grid-row:1;margin:-3px -6px 0 2px}
.npf-post .post .pmore{width:28px;height:28px;color:var(--dim)}
.npf-post .post>:not(.ph){grid-column:2/-1;min-width:0}
.npf-post .post .body{padding:0;margin:6px 0 10px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.npf-post .post .mer{margin:-6px 0 10px}
.npf-post .post .pc-media{margin:0 0 10px;padding:0}
.npf-post .post .pc-media .wallmedia img{border-radius:8px}
.npf-post .post .wpass,.npf-post .post .wlfg,.npf-post .post .wpromo{margin:0 0 10px}
.npf-post .pfoot{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;border:0;padding:0;margin:0 0 0 -6px;color:var(--dim)}
.npf-post .pfoot .act{flex:none;height:26px;padding:0 6px;gap:6px;border-radius:var(--r);font:500 12.5px/1 var(--ui);color:var(--dim)}
.npf-post .pfoot .act:hover{background:var(--inset);color:var(--ink)}
.npf-post .pfoot .act svg{width:14px;height:14px}
.npf-post .pfoot .act.on{color:var(--accent-ink)}
.npf-post .pcount{order:-1;margin:0 8px 0 6px;padding:0;gap:10px;justify-content:flex-start;font-size:12.5px;color:var(--dim)}
.npf-post .pcount .pc-l{order:-1;margin:0;color:var(--ink2)}
.npf-post .pcount .pc-c{color:var(--dim)}
.npf-post .cwrap,.npf-post [data-cpreview]{margin-top:8px}
/* händelseraderna i väggkortet (duellen, utmaningen, Unreal) — som mockupens .a-mom */
.npf-post>.card.post.post-ev{display:block}
.npf-post .post-ev .pev{display:flex;align-items:center;gap:12px;padding:0}
.npf-post .post-ev .pev-ic{width:32px;height:32px;flex:none}
.npf-post .post-ev .dv-kronad>.av{width:32px;height:32px}
.npf-post .post-ev .pev-line{font-size:13.5px;font-weight:600;color:var(--ink)}
.npf-post .post-ev .pev-meta{font-size:12px}
.npf-post .post-ev .cwrap,.npf-post .post-ev [data-cpreview]{margin:8px 0 0 44px}
.npf-tom{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:13.5px;color:var(--ink2);line-height:1.4}
.npf-tom>i{color:var(--dim)}
.npf-tom b{color:var(--ink)}
.npf-wall .pguest-blur{max-height:520px;overflow:hidden}

/* spelarkortet */
.npf-ks{padding:14px 18px;border-top:1px solid var(--line)}
.np-fh+.npf-ks{border-top:0}
.npf-ks>.n-ml{margin-bottom:9px;display:flex;align-items:baseline;gap:6px}
.npf-ks>.n-ml>span{text-transform:none;letter-spacing:0;font-weight:500;font-size:11.5px;color:var(--dim)}
.npf-ks>.n-ml>.n-lk,.npf-ks>.n-ml>button.n-lk{margin-left:auto;text-transform:none;letter-spacing:0;font-size:12px;background:none;border:0;padding:0}
.npf-lagen{display:flex;flex-direction:column;gap:6px}
.npf-lagen>div{display:grid;grid-template-columns:62px 1fr 38px;gap:10px;align-items:center;font-size:12.5px;color:var(--ink2)}
.npf-lagen em{font-style:normal;font:600 13px/1 var(--hd);color:var(--ink);text-align:right}
.npf-dnah{font-size:14px;font-weight:600;margin:-2px 0 10px;color:var(--ink)}
.npf-dnah .n-dim{font-weight:400;font-size:12px}
.npf-dna{display:flex;flex-direction:column;gap:7px}
.npf-dna .dr{display:grid;grid-template-columns:86px 1fr 30px;gap:10px;align-items:center;font-size:12.5px;color:var(--ink2)}
.npf-dna .db{height:8px;border-radius:4px;background:var(--inset);position:relative}
.npf-dna .db i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--accent)}
.npf-dna .db u{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;background:var(--ink2);margin-left:-1.5px}
.npf-dna em{font-style:normal;font:600 13px/1 var(--hd);color:var(--ink);text-align:right}
.npf-facts{display:flex;flex-wrap:wrap;gap:6px}
.npf-facts>span,.npf-facts>a{display:flex;flex-direction:column;gap:3px;padding:8px 11px;border-radius:var(--r);background:var(--inset);font:600 14px/1.1 var(--hd);color:var(--ink);text-decoration:none;min-width:0}
.npf-facts>a:hover{box-shadow:0 0 0 1px var(--line2) inset}
.npf-facts small{font:600 9.5px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.npf-facts i{font-style:normal;font:500 11px/1 var(--ui);color:var(--dim)}
.npf-kop{display:flex;gap:6px}
.npf-kop>a{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:8px 10px;border-radius:var(--r);background:var(--inset);color:inherit;text-decoration:none}
.npf-kop>a:hover{box-shadow:0 0 0 1px var(--line2) inset}
.npf-kop i{grid-row:span 2;font-size:16px;color:var(--live)}
.npf-kop .dc i{color:#5865f2}
.npf-kop .av i{color:var(--faint)}
.npf-kop b{font-size:12.5px;color:var(--ink)}
.npf-kop small{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-links{display:flex;flex-wrap:wrap;gap:6px}
.npf-links a{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:var(--r);font-size:13px;color:var(--ink2);background:var(--inset);text-decoration:none}
.npf-links a:hover{color:var(--ink);box-shadow:0 0 0 1px var(--line2) inset}
.npf-links a b{color:var(--ink)}
.npf-links a i{color:var(--accent-ink)}
.npf-besok{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2)}
.npf-besok .n-fp>a+a{margin-left:-7px}
.npf-besok .n-fp .n-av{box-shadow:0 0 0 2px var(--card)}
.npf-besok b{color:var(--ink)}
/* favoritskinnet */
.npf-lks{display:flex;gap:12px;align-items:center}
.npf-lki{flex:none;width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--inset)}
.npf-lki img{width:100%;height:100%;object-fit:cover;display:block}
.npf-lks b{display:block;font-size:14px;color:var(--ink)}
.npf-lks small{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.npf-lks em{display:inline-block;margin-top:5px;font:700 9.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);background:var(--inset);padding:3px 6px;border-radius:4px}
.npf-lkm{font-size:12.5px;color:var(--dim)}
.npf-lkp{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.npf-lkp input[type=text]{width:100%;height:34px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r);background:var(--inset);color:var(--ink);font:400 13px/1 var(--ui)}
.npf-lka{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink2);cursor:pointer}
.npf-lka input{width:16px;height:16px;accent-color:var(--accent)}
.npf-lkr{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.npf-lkb{border:1px solid var(--line);border-radius:8px;padding:6px;background:none;cursor:pointer;color:var(--ink);text-align:center}
.npf-lkb:hover{border-color:var(--accent)}
.npf-lkb img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block}
.npf-lkb span{display:block;font-size:10.5px;font-weight:600;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* omdömena och Companion-raden (forre_pulse:s partials) i nya temats material */
.npf-col>.card{box-shadow:none}

/* ---------------------------------------------------------------- 5. FLIKARNA BILDER · KLIPP · STATISTIK · VÄNNER */
[data-ppanel]:not([data-ppanel*="oversikt"])>.np-panel{margin-top:16px}
[data-ppanel]:not([data-ppanel*="oversikt"])>.np-panel+.np-panel{margin-top:12px}
.npf-gal .pgal-row{display:flex;gap:10px;flex-wrap:wrap}
.npf-gal .pgal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.npf-gal .pgal-empty{grid-column:1/-1;color:var(--dim);font-size:13px;padding:8px 0}
.npf-gal .pgal-cell{position:relative;aspect-ratio:1/1;width:100%;padding:0;border:1px solid var(--line);background:var(--inset) center/cover no-repeat;cursor:zoom-in;overflow:hidden;border-radius:8px}
.npf-gal .pgal-cell:hover{border-color:var(--line2)}
.npf-gal .pgal-row .pgal-cell{width:64px;height:64px;aspect-ratio:auto;border-radius:50%}
.npf-gal .pgal-row .pgal-cell.is-active{border-color:var(--live);box-shadow:0 0 0 2px var(--live-wash)}
.npf-gal .pgal-cc{position:absolute;bottom:4px;right:4px;padding:2px 6px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);border-radius:4px;display:inline-flex;align-items:center;gap:4px}
.npf-klipp .pk-vinstrad{margin:12px 18px 0}
.npf-klipp .pk-rut{padding:14px 18px 18px}
.npf-stat .np-fh>.n-lk{margin-left:auto}
.npf-st6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.npf-st6.fyra{grid-template-columns:repeat(4,minmax(0,1fr))}
.npf-st6>span{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:8px;background:var(--inset);min-width:0}
.npf-st6 small{font:600 9.5px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-st6 b{font:700 20px/1 var(--hd);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-stat .plsel{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.npf-sr{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 0;font-size:12.5px;color:var(--ink2)}
.npf-sr+.npf-sr{border-top:1px solid var(--line)}
.npf-sr b{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-sr small{color:var(--dim);white-space:nowrap}
.npf-vg{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px 10px;padding:16px 18px 18px}
.npf-vc{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);min-width:0;text-align:center}
.npf-vc b{font-size:12.5px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npf-vc small{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--live)}
.npf-vc:hover b{color:var(--accent-ink)}

/* Väggen-fliken: samma panel, utan matchen (den hör till översikten) */
.npf[data-npf-flik="wall"] .nvs{display:none}

/* kopierat-rutan (Dela, Discord-handle, Epic-namnet) */
.ptoast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);z-index:200;padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--card);font-size:13px;font-weight:700;box-shadow:var(--sh2);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.ptoast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------------------------------------------------------- 6. SMALARE DATORER */
@media (max-width:1339px){
  .npf-g{grid-template-columns:minmax(0,1fr) 440px}
  .npf-g3{grid-template-columns:260px minmax(0,1.12fr) minmax(0,1fr)}
  .npf-fx{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1179px){
  /* huvudet: identiteten överst, personen och spelaren på en rad under */
  .npf-g3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .npf-id{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av who" "av acts";column-gap:18px;align-items:end}
  .npf-avw{grid-area:av;margin-bottom:0;align-self:start}
  .npf-who{grid-area:who;padding-top:58px}
  .npf-acts{grid-area:acts;margin-top:10px}
  .npf-g{grid-template-columns:minmax(0,1fr) 380px}
  .nvs-r{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:821px) and (max-width:1023px){
  .npf-g{grid-template-columns:minmax(0,1fr)}
  .npf-g3{grid-template-columns:minmax(0,1fr)}
  .npf-fx{grid-template-columns:repeat(3,minmax(0,1fr))}
  .npf-st6{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------------------------------------------------------------- 7. MOBILEN (≤ 820) — NY.mphead + C.mProfil */
@media (max-width:820px){
  .npf{gap:12px}
  .npf-ph{border-left:0;border-right:0;border-radius:0;margin:-12px -16px 0}
  .npf-cov{height:96px}
  .npf-covstd{padding:0 56px}
  .npf-covstd svg{width:34px;height:34px}
  .npf-covnm{font-size:21px}
  .npf-soc{bottom:8px;right:10px}
  .npf-soc>a,.npf-soc>button{width:26px;height:26px}
  .npf-g3{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:0 0 10px}
  .npf-id{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-areas:"av acts" "who who";column-gap:12px;align-items:end;margin-top:-36px;padding:0 14px}
  .npf-avw{grid-area:av;margin:0}
  .npf-avw>.n-av.s104{--s:76px;--f:22px}
  .npf-acts{grid-area:acts;justify-self:end;margin:0;padding-bottom:4px;flex-wrap:nowrap}
  .npf-acts .n-btn{height:26px;padding:0 9px;font-size:12px}
  .npf-acts .n-btn.ico{width:26px;padding:0}
  .npf-acts [data-npf-dela]{display:none}
  .npf-acts .pmenu-dd{left:auto;right:0}
  .npf-mob{display:block}
  .npf-who{grid-area:who;padding:8px 0 0}
  .npf-who h1{font-size:23px}
  .npf-who .sub{font-size:12.5px}
  .npf-who .sub.ep{display:none}
  .npf-bio{font-size:13.5px}
  .npf-half{margin:0 12px}
  .npf-g3>.npf-half.npf-pers{margin-top:4px}
  .npf-fx{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .npf-kan.own>span{white-space:normal}
  .npf-rk2{grid-template-columns:1fr 1fr;gap:6px}
  .npf-rk2.en{grid-template-columns:1fr}
  .npf-rk2>div,.npf-rk2>a{padding:8px;gap:8px}
  .npf-rk2 .n-emb{width:32px;height:32px}
  .npf-rk2 .big{font-size:26px}
  .npf-rk2 em{display:none}
  .npf-st4 b,.npf-du b{font-size:17px}
  .npf-st4.fem b,.npf-st4.fem .npf-du b{font-size:15px}
  .npf-best.tre{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .npf-best.tre .npf-du{grid-column:1/-1}
  .npf-st4>span{padding:7px 8px}
  .npf-best{grid-template-columns:1fr 1fr}
  .npf-tabs{padding:0 10px;gap:2px}
  .npf-tabs a{padding:11px 9px;font-size:13px}
  .npf-tabs a.on:after{left:9px;right:9px}

  .nvs{margin:0;padding:14px}
  .nvs-h{grid-template-columns:1fr auto 1fr;gap:8px}
  .nvs-sd,.nvs-sd.hen{flex-direction:column;gap:6px;text-align:center;justify-content:flex-start}
  .nvs-sd.hen{flex-direction:column-reverse;justify-content:flex-end}
  .nvs-sd .n-av{--s:44px;--f:14px}
  .nvs-sd b{font-size:16px}
  .nvs-sd small,.nvs-sd.hen small{justify-content:center;font-size:10.5px;flex-direction:column;gap:2px}
  .nvs-sd small .n-emb{width:22px;height:22px}
  .nvs-sc{font-size:34px}
  .nvs-mid>span{font-size:11.5px}
  .nvs-ab{flex-direction:column;width:100%}
  .nvs-ab>*,.nvs-ab [data-nitva-slot]>.n-btn{width:100%}
  .nvs-ab [data-nitva-slot]{width:100%}
  .nvs-r{grid-template-columns:1fr 1fr;gap:12px 16px}
  .nvs-n{flex-direction:column;align-items:flex-start}
  .nvs-n .nvs-ab{flex-direction:row;width:auto}
  .nvs-n .nvs-ab>*,.nvs-n .nvs-ab [data-nitva-slot]>.n-btn,.nvs-n .nvs-ab [data-nitva-slot]{width:auto}

  .npf-compl{margin-top:0}
  .npf-g{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:0}
  .npf-col{gap:12px}
  .npf-wall .np-fh,.npf-kort .np-fh{padding:0 12px;height:44px}
  .npf-wc{padding:10px 12px}
  .npf-wall .pcu{margin:10px 12px 0}
  .npf-wall .pcu-vf{margin:0 12px 10px}
  .npf-mom{padding:8px 12px;grid-template-columns:30px minmax(0,1fr) auto}
  .npf-mi{width:30px;height:30px}
  .npf-post{padding:8px 12px 12px}
  .npf-post>.card.post{grid-template-columns:32px minmax(0,1fr) auto;column-gap:10px}
  .npf-post .post .ph>.av{width:32px;height:32px}
  .npf-post .post .ph .t{font-size:11px}
  .npf-post .pfoot .act[data-share]{display:none}
  .npf-tom{padding:12px}
  .npf-ks{padding:12px}
  .npf-dna .dr{grid-template-columns:78px 1fr 26px}
  .npf-kop{flex-wrap:wrap}
  .npf-kop>a{flex:1 1 140px}
  .npf-st6,.npf-st6.fyra{grid-template-columns:repeat(2,minmax(0,1fr))}
  .npf-sr{grid-template-columns:minmax(0,1fr);gap:2px}
  .npf-vg{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));padding:12px}
  [data-ppanel]:not([data-ppanel*="oversikt"])>.np-panel{margin-top:0}
}

/* ---------------------------------------------------------------- KOM FRÅN TOPPLISTAN (?fran=lb)
   Raden ritas i rad 2 av ny-skal.js ([data-ny-ctx]). Mobilen har ingen rad 2 — där står den
   överst i sidan (mockupens am-ctx), utan "Tillbaka till din rad" (racet visar den). */
.npf-ctx{display:none}
@media (max-width:820px){
  .npf-ctx{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 10px;font-size:12.5px;color:var(--ink2)}
  .npf-ctx a.bk{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--accent-ink);text-decoration:none}
  .npf-ctx b{color:var(--ink)}
  .npf-ctx .n-lk{display:none}
}