/* ===========================
   STATYSTYKI
=========================== */
.krStats{
    display:grid;
    gap:18px;
    width:100%;
}
.krStat{
    display:grid;
    grid-template-columns:130px 1fr 45px;
    align-items:center;
    gap:18px;
}
.krStat span{
    color:var(--biel);
    font-family:var(--fontp);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:2px;
}
.krStat strong{
    color:var(--biel);
    font-family:var(--fontp);
    font-size:12px;
    font-weight:100;
    text-align:right;
}
.krStatBar{
    position:relative;
    width:100%;
    height:2px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
}
.krStatFill{
    position:absolute;
    left:0;
    top:0;
    width:0%;
    height:100%;
    background:var(--staty);
    transition:width .5s ease;
}
.sidebarBlock {
  width: 200px;
  margin-top: 35px;
}
.sidebarBlock {
  position: relative;
}
.profilePage{
    width:1040px;
    margin:40px auto;
    position:relative;
}
/*------------------------------------
 HERO
------------------------------------*/
.profileHero{
    position:relative;
    width:1040px;
    height:200px;
    overflow:hidden;
    border:1px solid var(--borderprofil);
    box-sizing:border-box;
    background:#111;
}
.profileHeroImage{
    position:absolute;
    inset:0;
}
.profileHero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:120px;
    background:linear-gradient(to top,
    rgba(8,8,8,.9),
    rgba(8,8,8,0));
    z-index:2;
}
/*------------------------------------
 OVERLAY
------------------------------------*/
.profileHeroOverlay{
    position:relative;
    z-index:5;
    height:100%;
    display:flex;
    align-items:center;
    padding:0 60px;
    box-sizing:border-box;
	background: var(--tloprofil);
}
.profileSigil{
    width:180px;
    height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:45px;
    flex-shrink:0;
}
.profileSigil img{
    width:165px;
    height:165px;
    object-fit:contain;
    transition:.5s;
}
/*------------------------------------
 TYTUŁ
------------------------------------*/
.profileTitle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
}
/*------------------------------------
 IMIĘ
------------------------------------*/
.profileName,
.profileName a,
.profileName strong,
.profileName span{
    margin:0;
    padding:0;
    font-family:Ghosthey;
    font-size:45px;
    line-height:.88;
    font-weight:normal!important;
    letter-spacing:2px;
    color:transparent!important;
    -webkit-text-stroke:1px rgba(240,240,240,.95);
    transition:.4s;
}
.profileHero:hover .profileName{
    letter-spacing:3px;
}
/*------------------------------------
 RÓD
------------------------------------*/
.profileGroup{
    margin-top:14px;
    font-family:Afacad;
    font-size:17px;
    letter-spacing:8px;
    text-transform:uppercase;
    color:rgba(255,255,255,.72);
}
/*------------------------------------
 MENU ZAKŁADEK
------------------------------------*/
.tabsNav{
    display:flex;
    align-items:center;
    gap:25px;
    margin-top:18px;
}
.tabButton{
    position:relative;
    background:none;
    border:none;
    outline:none;
    padding:0;
    cursor:pointer;
    color:#d3d3d3;
    font-family:var(--fontp);;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:3px;
    opacity:.55;
    transition:.35s;
}
.tabButton:hover{
    opacity:1;
    color:#fff;
}
.tabButton.active{
    opacity:1;
}
/* kreska */
.tabButton::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-12px;
    width:0;
    height:2px;
    background:var(--bordomocne);
    transition:.35s;
}
.tabButton:hover::after{
    width:100%;
}
.tabButton.active::after{
    width:100%;
}
/* Korekty hero profilu: identyczne tło inicjałów oraz herb bez inverta. */
.nbProfileHeroLeft,
.nbProfileHeroIdentity,
.nbProfileHeroTitle {
    text-align: left !important;
}
/* $formattedname wnosi własne tło na całe imię — usuwamy je tylko z rodzica. */
.nbProfileHeroName > span,
.nbProfileHeroName > a > span {
    padding: 0 !important;
    background: transparent !important;
}
/* Herb jest jednokolorową maską, tak jak w postbicie. */
.nbProfileGroupImage .nbHeroCrest {
    display: block;
    width: 85px;
    height: 85px;
    background: var(--biel);
    -webkit-mask: var(--nb-crest-url) center / contain no-repeat;
    mask: var(--nb-crest-url) center / contain no-repeat;
}
/* Hero kończy się na tytule i herbie; zakładki mają własny pasek pod nim. */
.profileHero {
    height: 160px;
}
.nbProfileGroupImage {
    margin-left: 20px;
}
.nbProfileTabs {
    display: flex;
    width: 1040px;
    min-height: 66px;
    box-sizing: border-box;
    align-items: center;
    padding: 18px 60px;
    border-right: 1px solid var(--borderprofil);
    border-left: 1px solid var(--borderprofil);
    background: var(--gradient);
}
.nbProfileTabs .tabsNav {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 0;
}
.nbProfileTabs .tabButton::after {
    bottom: -10px;
}
/* Układ jak w postbicie: zakładki kończą się przed podniesionym avatarem. */
.profilePage {
    display: grid;
    grid-template-columns: 740px 300px;
    align-items: start;
}
.profileHero {
    grid-column: 1 / -1;
}
.nbProfileTabs {
    width: 740px;
    grid-column: 1;
    border-right: 0;
}
/* Główna treść i sidebar stają się elementami tej samej siatki. */
.profileWrapper {
    display: contents !important;
}
.profileContent {
    width: 740px;
    grid-column: 1;
    grid-row: 3;
}
.profileSidebar {
    width: 300px;
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: stretch;
}
.profileSection1 {
    grid-column: 1 / -1;
}
.profilePage > br {
    display: none;
}
/* Ten sam wymiar co postbit: 1010 px = 710 px treści + 300 px sidebaru. */
.profilePage {
    width: 1010px !important;
    grid-template-columns: 710px 300px !important;
    margin: 40px auto !important;
}
.profileHero,
.profileWrapper,
.profileSection1 {
    width: 1010px !important;
}
.nbProfileTabs,
.profileContent {
    width: 710px !important;
}
/* Dokładnie takie same proporcje wnętrza hero jak w .nbPost. */
.profileHero {
    height: 180px !important;
}
.profileHeroOverlay {
    padding: 0 20px !important;
}
.nbProfileGroupImage {
    width: 110px !important;
    height: 110px !important;
    flex-basis: 110px !important;
}
/* ==================================================
   HERO PROFILU — nagłówek i herb jak w postbicie
   ================================================== */
.profilePage {
    --nb-group-color: var(--borderprofil);
}
.profilePage:has(.nbProfileHeroName span[style*="var(--korona)"]) { --nb-group-color: var(--korona); }
.profilePage:has(.nbProfileHeroName span[style*="var(--reach)"]) { --nb-group-color: var(--reach); }
.profilePage:has(.nbProfileHeroName span[style*="var(--polnoc)"]) { --nb-group-color: var(--polnoc); }
.profilePage:has(.nbProfileHeroName span[style*="var(--dorzecze)"]) { --nb-group-color: var(--dorzecze); }
.profilePage:has(.nbProfileHeroName span[style*="var(--dolina)"]) { --nb-group-color: var(--dolina); }
.profilePage:has(.nbProfileHeroName span[style*="var(--zachod)"]) { --nb-group-color: var(--zachod); }
.profilePage:has(.nbProfileHeroName span[style*="var(--dorne)"]) { --nb-group-color: var(--dorne); }
.profilePage:has(.nbProfileHeroName span[style*="var(--kingsroad)"]) { --nb-group-color: var(--kingsroad); }
.profilePage:has(.nbProfileHeroName span[style*="var(--zelaznewyspy)"]) { --nb-group-color: var(--zelaznewyspy); }
.profilePage:has(.nbProfileHeroName span[style*="var(--essos)"]) { --nb-group-color: var(--essos); }
.nbProfileHeroLeft {
    min-width: 0;
    flex: 1;
}
.nbProfileHeroIdentity {
    min-width: 0;
    margin-top: 25px;
}
.nbProfileHeroNameRow {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
}
.nbProfileHeroName {
    min-width: 0;
    margin: 0;
    color: var(--biel);
    font-family: var(--medieval);
    font-size: 40px;
    font-weight: normal;
	text-transform: capitalize;
    letter-spacing: 2px;
    line-height: 1;
}
.nbProfileHeroName a,
.nbProfileHeroName a span {
    padding: 0;
    background: transparent;
}
.nbProfileHeroName .nbNameWord {
    display: inline;
    white-space: nowrap;
}
.nbProfileHeroName .nbNameInitial {
    display: inline-grid;
    width: .98em;
    height: .98em;
    margin-right: .055em;
    place-items: center;
    vertical-align: .06em;
    background: color-mix(in srgb, var(--nb-group-color) 95%, transparent);
    border: 1px solid color-mix(in srgb, var(--nb-group-color) 75%, var(--borderprofil));
    color: inherit;
    font-size: 50px;
    line-height: 1;
}
.nbProfileHeroLine {
    min-width: 24px;
    height: 1px;
    flex: 1;
    background: color-mix(in srgb, var(--nb-group-color) 95%, var(--borderszary));
}
.nbProfileHeroTitle {
    margin-top: 7px;
    color: var(--biel);
    font-family: var(--kursywa);
    font-size: 17px;
    letter-spacing: 3px;
}
.nbProfileHeroTitle + .tabsNav {
    margin-top: 22px;
}
.nbProfileGroupImage {
    display: grid;
    width: 107px;
    height: 107px;
    box-sizing: border-box;
    flex: 0 0 107px;
    place-items: center;
    padding: 10px;
    background: color-mix(in srgb, var(--nb-group-color) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--nb-group-color) 75%, var(--borderprofil));
}
.nbProfileGroupImage .nbHeroRight,
.nbProfileGroupImage .nbHeroRight img,
.nbProfileGroupImage .nbHeroCrest {
    display: block;
    width: 85px;
    height: 85px;
}
.nbProfileGroupImage .nbHeroRight img {
    object-fit: contain;
}
/*------------------------------------
 WRAPPER
------------------------------------*/
.profileWrapper{
    width:1040px;
    display:grid;
    grid-template-columns:740px 300px;
}
/*------------------------------------
 CONTENT
------------------------------------*/
.profileContent{
    width:740px;
    min-height:550px;
	background: var(--gradient);
    border-left:1px solid var(--borderprofil);
    border-bottom:1px solid var(--borderprofil);
    padding:28px;
    box-sizing:border-box;
}
/*------------------------------------
 SIDEBAR
------------------------------------*/
.profileSidebar{
    width:300px;
    background:var(--gradient);
border-left: 1px solid var(--borderprofil);
    border-right:1px solid var(--borderprofil);
    border-bottom:1px solid var(--borderprofil);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 0 35px;
    box-sizing:border-box;
}
.sidebarStat::before{
    content:"";
    order:2;
    flex:1;
    margin:0 12px;
    border-bottom:1px solid var(--borderprofil);
}
/*==================================================
            KINGSROAD PROFILE V2
             PART 2 - SIDEBAR
==================================================*/
/*------------------------------------
 AVATAR
------------------------------------*/
.profileAvatar{
    width:200px;
    height:320px;
    margin-top:29px;
    position:relative;
    overflow:hidden;
    border:1px solid var(--borderprofil);
    background:#111;
    z-index:50;
}
.profileAvatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
/*------------------------------------
 STATYSTYKI
------------------------------------*/
.sidebarStat{
    display:flex;
    align-items:center;
    margin-bottom:22px;
    font-size:12px;
}
.sidebarStat span{
    font-family:var(--fontp);
    text-transform:uppercase;
    color:var(--bordojasne);
    white-space:nowrap;
}
.sidebarStat strong{
    order:3;
    font-family:Instrument;
    font-weight:400;
    color:var(--biel);
    white-space:nowrap;
}
/*------------------------------------
 SIDEBAR BUTTONS
------------------------------------*/
.profileMenu1{
    width:220px;
    display:grid;
    gap:12px;
    margin-top:20px;
}
.profileMenu1 a{
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--borderprofil);
    text-decoration:none;
    color:var(--biel);
    font-family:var(--kursywa);
    font-size:12px;
    letter-spacing:3px;
    text-transform:lowercase;
    transition:.35s;
}
.profileMenu1 a:hover{
    background:var(--borderprofil);
}
/*------------------------------------
 CONTENT
------------------------------------*/
.profileSection{
    width:100%;
}
/*------------------------------------
 ZAKŁADKI
------------------------------------*/
.tabContent{
    display:none;
    animation:fadeProfile .35s ease;
}
.tabContent.active{
    display:block;
}
@keyframes fadeProfile{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/*------------------------------------
 POLA PROFILU
------------------------------------*/
.profileFields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}
.profileField{
    padding:18px 20px;
    border:1px solid var(--borderprofil);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    transition:.35s;
}
.profileFieldName{
    margin-bottom:14px;
    font-family:var(--fontp);
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--bordojasne);
}
.profileFieldValue{
    font-family:var(--kursywa);
    font-size:14px;
    letter-spacing:1.5px;
    line-height:1.2;
    color:var(--biel);
}
/*------------------------------------
 MENU DOLNE
------------------------------------*/
.profileMenu{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:15px;
    margin-top:25px;
}
.profileMenu a{
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--borderprofil);
    text-decoration:none;
    color:var(--biel);
	letter-spacing: 1.8px;
    font-family:var(--kursywa);
    font-size:12px;
    text-transform:lowercase;
}
/*==================================================
            KINGSROAD PROFILE V2
             PART 3 - CONTENT
==================================================*/
/*------------------------------------
 GŁÓWNA SEKCJA
------------------------------------*/
.profileSection{
    width:100%;
    position:relative;
}
.profileTabs{
    width:100%;
}
/*------------------------------------
 BOX
------------------------------------*/
.profileBox{
    border:1px solid var(--borderprofil);
    background:rgba(255,255,255,.015);
    margin-bottom:20px;
    overflow:hidden;
}
.profileBoxTitle{
    height:42px;
    display:flex;
    align-items:center;
    padding:0 20px;
    font-family:Afacad;
    font-size:12px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--bordojasne);
    border-bottom:1px solid rgba(255,255,255,.05);
}
.profileBoxContent{
    padding:22px;
}
/*------------------------------------
 STATYSTYKI
------------------------------------*/
.statsGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.statCard{
    padding:22px;
    border:1px solid var(--borderprofil);
    background:rgba(255,255,255,.015);
    transition:.35s;
}
.statCard:hover{
    border-color:var(--bordomocne);
    transform:translateY(-3px);
}
.statValue{
    font-family:Ghosthey;
    font-size:48px;
    line-height:1;
    color:transparent;
    -webkit-text-stroke:1px var(--biel);
}
.statLabel{
    margin-top:12px;
    font-family:Afacad;
    font-size:11px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--bordojasne);
}
/*------------------------------------
 HONORY
------------------------------------*/
.honorsGrid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}
.honorItem{
    border:1px solid var(--borderprofil);
    background:rgba(255,255,255,.015);
    padding:18px;
    text-align:center;
    transition:.35s;
}
.honorItem:hover{
    transform:translateY(-4px);
    border-color:var(--bordomocne);
}
.honorItem img{
    width:70px;
    height:70px;
    object-fit:contain;
    margin-bottom:12px;
    transition:.35s;
}
.honorItem:hover img{
    transform:scale(1.08);
}
.honorName{
    font-family:Afacad;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--biel);
}
.honorDesc{
    margin-top:8px;
    font-family:Instrument;
    font-size:12px;
    color:#bbb;
    line-height:1.5;
}
.sidebarBlock{
    position:relative;
}
.sidebarBlock::before{
    content:"";
    position:absolute;
    top:-18px;
    left:0;
    width:100%;
    height:0px;
}
/*------------------------------------
 HONORS
------------------------------------*/
.honorItem{
    position:relative;
    overflow:hidden;
}
.honorItem::before{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid transparent;
    transition:.35s;
}
.honorItem:hover::before{
    border-color:rgba(255,255,255,.12);
}
/*------------------------------------
 SCROLLBAR
------------------------------------*/
::-webkit-scrollbar{
    width:9px;
}
::-webkit-scrollbar-track{
    background:#111;
}
::-webkit-scrollbar-thumb{
    background:var(--borderprofil);
}
::-webkit-scrollbar-thumb:hover{
    background:var(--bordomocne);
}
/*------------------------------------
 ADMIN
------------------------------------*/
.profileSection1 {
  width: 1040px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--fontp);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 100;
	padding-top: 10px; 
}
.profileSection1 ul{
    display:flex;
    gap:12px;
    list-style:none;
    padding:0;
    margin:0;
}
.profileSection1 li{
    list-style:none;
}
.profileSection1 a{
    color:var(--bordojasne);
    text-decoration:none;
    transition:.3s;
}
.profileSection1 a:hover{
    color:var(--biel);
}
/*------------------------------------
 STATIC LAYOUT
------------------------------------*/
html,
body{
    min-width:1100px;
    overflow-x:auto;
}
.profilePage{
    width:1040px;
}
.profileHero{
    width:1040px;
}
.profileWrapper{
    width:1040px;
}
.profileContent{
    width:740px;
}
.profileSidebar{
    width:300px;
}
/*------------------------------------
 TAB ANIMATION
------------------------------------*/
.tabContent{
    animation:fadeProfile .35s ease;
}
@keyframes fadeProfile{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.tabContent{
    opacity:0;
    visibility:hidden;
    position:absolute;
    width:100%;
    transition:.35s;
}
.tabContent.active{
    opacity:1;
    visibility:visible;
    position:relative;
}
.tabButton::after{
    left:50%;
    width:0;
    transform:translateX(-50%);
}
.tabButton:hover::after{
    width:100%;
}
.tabButton.active::after{
    width:100%;
}