/* === 10. MENU POSTACI ====================================================== */
#character-hub-view {
    background-image: var(--hub-background-image, url("../image/bg/class_menu_warm.png"));
    background-size: 1920px 1080px;
    background-position: center;
}

.hub-brand,
.hub-top-actions,
.hub-profile-panel,
.hub-active-card,
.hub-info-panel,
.hub-nav {
    position: absolute;
    z-index: 2;
}

.hub-brand {
    left: 148px;
    top: 0px;
    width: 480px;
    height: 256px;
    overflow: hidden;
    color: transparent;
    background: transparent url("../image/ui/logo.png") center / 480px 256px no-repeat;
    pointer-events: none;
}

.hub-top-actions {
    right: 82px;
    top: 4px;
    width: 320px;
    height: 96px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 67px);
    gap: 0;
    background: transparent url("../image/ui/window_small_frame.png") center / 320px 96px no-repeat;
}

.hub-icon-button {
    position: relative;
    width: 72px;
    height: 96px;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: transparent url("../image/ui/button_square.png") center / 72px 96px no-repeat;
}

.hub-icon-button::after {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 72px;
    height: 72px;
    pointer-events: none;
    background-image: url("../image/ui/icon_squere_button.png");
    background-repeat: no-repeat;
    background-size: 288px 72px;
}

.hub-icon-button:hover {
    filter: saturate(1.08) brightness(1.05);
}

.hub-icon-button:active {
    background-image: url("../image/ui/button_square_press.png");
    transform: translateY(1px);
}

.hub-icon-button--profile::after {
    background-position: 0 0;
}

.hub-icon-button--mail::after {
    background-position: -72px 0;
}

.hub-icon-button--banner::after {
    background-position: -144px 0;
}

.hub-icon-button--settings::after {
    background-position: -216px 0;
}

.hub-profile-panel {
    /* --- Pelne strojenie panelu Profil: uklad i wyglad w jednym miejscu --- */

    /* Okno panelu: polozenie, rozmiar, grafika i bazowy wyglad tekstu. */
    --profile-panel-width: 400px;
    --profile-panel-height: 576px;
    --profile-panel-font-family: var(--font-body);

    /* Nazwa klasy i znajdujacy sie pod nia napis "Poziom". */
    --profile-label-color: #a99878;
    --profile-label-font-size: 12px;
    --profile-label-letter-spacing: .08em;

    /* Ramka z cyfra poziomu. */
    --profile-level-value-width: 104px;
    --profile-level-value-height: 104px;

    /* Ramka oraz wypelnienie paska doswiadczenia. */
    --profile-xp-bar-width: 312px;
    --profile-xp-bar-height: 48px;

    /* Lista ubranych relikwii w miejscu dawnych kafelkow Pyl/Krysztaly. */
    --relic-content-width: 312px;
    --relic-title-margin-bottom: 12px;
    --relic-title-color: var(--profile-label-color);
    --relic-title-size: calc(var(--profile-label-font-size) + 2px);
    --relic-title-family: var(--profile-panel-font-family);
    --relic-list-gap: 4px;
    --relic-row-columns: 1fr auto;
    --relic-row-gap: 14px;
    --relic-row-min-height: 27px;
    --relic-row-padding: 5px 0;
    --relic-row-border: 1px solid rgba(197, 160, 89, .20);
    --relic-empty-color: #8d7e61;
    --relic-name-color: #b6a588;
    --relic-name-size: 14px;
    --relic-name-family: var(--font-body);
    --relic-meta-color: #8f7f5d;
    --relic-meta-size: 10px;
    --relic-value-color: #ead29d;
    --relic-value-size: 14px;
    --relic-value-family: var(--font-title);

    left: 192px;
    top: 172px;
    width: var(--profile-panel-width);
    height: var(--profile-panel-height);
    padding: 76px 48px 48px 48px;
    background: transparent url("../image/ui/window_character.png") center / var(--profile-panel-width) var(--profile-panel-height) no-repeat;
    color: #c4b291;
    font-family: var(--profile-panel-font-family);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .85);
}

/* Zakladka "Profil" w gornej czesci ramki. */
.hub-profile-tab {
    position: absolute;
    left: 86px;
    top: 27px;
    width: 228px;
    height: 34px;
    color: #cab182;
    font-family: var(--font-title);
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #000;
    pointer-events: none;
}

.hub-profile-name {
    color: #cab68c;
    font-family: var(--font-title);
    font-size: 25px;
    line-height: 1.05;
    transform: translate(8px, 0px);
}

.hub-profile-subline {
    transform: translate(8px, 0px);
}

.hub-profile-subline,
.hub-profile-progress span,
.hub-profile-placeholder span {
    color: var(--profile-label-color);
    font-size: var(--profile-label-font-size);
    text-transform: uppercase;
    letter-spacing: var(--profile-label-letter-spacing);
}

/* Cala sekcja poziomu i doswiadczenia. */
.hub-profile-progress {
    margin-top: 20px;
    text-align: right;
    transform: translate(0px, 0px);
}

.hub-profile-level-row {
    position: relative;
    width: 312px;
    height: 166px;
    margin: 10px 0 0;
}

.hub-profile-level-box,
.hub-profile-xp-box {
    position: absolute;
}

.hub-profile-level-box {
    left: -8px;
    top: -32px;
}

.hub-profile-xp-box {
    left: -4px;
    top: -40px;
    width: 194px;
}

/* Etykieta i liczba punktow doswiadczenia. */
.hub-profile-xp-box span {
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
    transform: translate(102px, 88px);
}

.hub-profile-level-box strong {
    width: var(--profile-level-value-width);
    height: var(--profile-level-value-height);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f2ddad;
    font-family: var(--font-title);
    font-size: 32px;
    background: transparent url("../image/ui/level_frame.png") center / var(--profile-level-value-width) var(--profile-level-value-height) no-repeat;
    text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, .85);
    transform: translate(0px, 18px);
}

.hub-profile-xp-box small {
    display: block;
    margin: 8px 0 0;
    color: #d7c49d;
    font-family: var(--font-body);
    font-size: 14px;
    white-space: nowrap;
    transform: translate(102px, 80px);
}

.hub-profile-level-row i {
    position: absolute;
    left: 0px;
    top: 118px;
    width: var(--profile-xp-bar-width);
    height: var(--profile-xp-bar-height);
    display: block;
    background: transparent url("../image/ui/exp_frame.png") center / var(--profile-xp-bar-width) var(--profile-xp-bar-height) no-repeat;
    overflow: hidden;
}

.hub-profile-level-row b {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: var(--profile-xp-bar-height);
    max-width: var(--profile-xp-bar-width);
    background: transparent url("../image/ui/exp_bar.png") left top / var(--profile-xp-bar-width) var(--profile-xp-bar-height) no-repeat;
}

/* Sekcja Choragwi zachowuje wysokosc dawnego placeholdera, aby nie przesuwac Relikwii. */
.hub-profile-placeholder {
    position: relative; width: 312px; height: 45px; margin-top: 28px;
    transform: translate(0px, -48px);
}

.hub-profile-banner-value {
    position: absolute; left: 0; top: -15px; display: flex; align-items: center;
    gap: 8px; width: 312px; height: 112px; overflow: hidden;
}

.hub-profile-banner-value strong {
    display: -webkit-box; min-width: 0; max-width: 312px; margin: 0; overflow: hidden;
    color: #e2cfa2; font: 17px/1.05 var(--font-title); text-overflow: ellipsis;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

.hub-profile-banner-value.has-rank strong { max-width: 192px; }

.hub-profile-banner-rank {
    flex: 0 0 112px; width: 112px; height: 112px; margin-left: auto;
    background: transparent url("../image/ui/rang_icon.png") var(--hub-banner-rank-x, 0) 0 / 896px 112px no-repeat;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .72));
}

.hub-profile-placeholder span {
    position: relative;
    left: 0px;
    top: 0;
}

.hub-profile-equipped {
    width: var(--relic-content-width);
    margin-top: 28px;
    transform: translate(0px, -40px);
}

.hub-profile-equipped .merge-panel-section-title {
    font-weight: 400;
    letter-spacing: var(--profile-label-letter-spacing);
}

.hub-active-card {
    left: 545px;
    top: 126px;
    width: 560px;
    height: 684px;
    pointer-events: none;
    background: none;
}

.hub-character-image {
    position: absolute;
    left: 0px;
    top: -104px;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
}

.hub-character-placeholder {
    position: absolute;
    left: 78px;
    top: 120px;
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e0c789;
    font-size: 112px;
    border: 1px solid rgba(197,160,89,.26);
    background: rgba(0,0,0,.25);
}

.hub-info-panel {
    left: 1164px;
    top: 80px;
    width: 448px;
    height: auto;
    padding: 0;
    overflow: visible;
    background: none;
    color: #d8c7a7;
}

.hub-class-panel {
    /* --- Pelne strojenie panelu Klasa postaci: uklad i wyglad w jednym miejscu --- */

    /* Okno panelu: polozenie, rozmiar i grafika ramki. */
    --class-panel-width: 448px;
    --class-panel-height: 228px;

    /* Tytul "Klasa postaci" w gornej czesci ramki. */
    --class-title-height: 32px;

    /* Pierwsza litera nazwy w czerwonej ramce. */
    --class-name-initial-width: 48px;

    position: relative;
    left: 0px;
    top: -4px;
    width: var(--class-panel-width);
    height: var(--class-panel-height);
    padding: 46px 28px 30px 48px;
    background: transparent url("../image/ui/window_class.png") center / var(--class-panel-width) var(--class-panel-height) no-repeat;
}

.hub-panel-title {
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}

.hub-panel-title--class {
    left: 80px;
    top: 14px;
    width: 224px;
    height: var(--class-title-height);
    color: #c4b291;
    font-family: var(--font-title);
    font-size: 16px;
    line-height: var(--class-title-height);
    text-shadow: 0 2px 0 #000;
}

/* Kontener logo, nazwy i opisu klasy. */
.hub-class-header {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    align-items: start;
    transform: translate(-8px, 16px);
}

/* Ikona klasy z atlasu image/ui/icon_class.png. */
.hub-class-emblem {
    display: block;
    width: 64px;
    height: 96px;
    background: transparent url("../image/ui/icon_class.png") var(--class-icon-offset, 0px) center / 768px 96px no-repeat;
    transform: translate(0px, 8px);
}

/* Pelna nazwa klasy. */
.hub-class-copy h1 {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 8px;
    color: #ccbb92;
    font-family: var(--font-title);
    font-size: 32px;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    transform: translate(0px, 0px);
}

.hub-class-name-initial {
    flex: 0 0 var(--class-name-initial-width);
    width: var(--class-name-initial-width);
    height: 58px;
    font-size: 48px;
    border: 1px solid #a67b3d;
    background: #5a1115;
    box-shadow: inset 0 0 0 2px rgba(38, 7, 8, .8), inset 0 0 12px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .65);
    transform: translate(0px, 0px);
}

/* Opis klasy pod nazwa. */
.hub-class-header p {
    color: #c9b99b;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.35;
    transform: translate(0px, 0px);
}

.hub-stats-panel {
    /* --- Pelne strojenie panelu Statystyki: uklad i wyglad w jednym miejscu --- */

    /* Okno panelu: polozenie, rozmiar i grafika ramki. */
    --stats-panel-width: 448px;
    --stats-panel-height: 480px;

    /* Tytul "Statystyki" w gornej czesci ramki. */
    --stats-title-height: 32px;

    /* Wspolny arkusz ikon oraz wymiary pojedynczej ikony. */
    --stats-icon-width: 36px;
    --stats-icon-height: 42px;

    position: relative;
    left: 0px;
    top: -4px;
    width: var(--stats-panel-width);
    height: var(--stats-panel-height);
    margin-top: -42px;
    padding: 46px 42px 34px 42px;
    background: transparent url("../image/ui/window_stats.png") center / var(--stats-panel-width) var(--stats-panel-height) no-repeat;
}
.hub-stats-panel__hitbox { position:absolute; inset:0; z-index:2; width:100%; height:100%; padding:0; border:0; outline:0; background:transparent; cursor:pointer; } .hub-stats-panel__hitbox:focus-visible { outline:1px solid rgba(214,178,103,.72); outline-offset:-28px; } .hub-stats-panel > .hub-panel-title,.hub-stats-panel > .hub-stat-grid { pointer-events:none; }

.hub-panel-title--stats {
    left: 80px;
    top: 24px;
    width: 224px;
    height: var(--stats-title-height);
    color: #c4b291;
    font-family: var(--font-title);
    font-size: 16px;
    line-height: var(--stats-title-height);
    text-shadow: 0 2px 0 #000;
}

/* Siatka wszystkich wierszy statystyk. */
.hub-stat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12.75px;
    margin-top: 0px;
    transform: translate(0px, 28px);
}

/* Pojedynczy wiersz: nazwa, wartosc klasy przed Relikwiami i osobny bonus Relikwii. */
.hub-stat-row {
    min-height: 37px;
    display: grid;
    grid-template-columns: 1fr 42px 42px;
    align-items: center;
    padding: 0 18px;
}

/* Nazwa statystyki obok ikony. */
.hub-stat-name {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c7b697;
    font-family: var(--font-body);
    font-size: 15px;
}

.hub-stat-icon {
    flex: 0 0 var(--stats-icon-width);
    width: var(--stats-icon-width);
    height: var(--stats-icon-height);
    display: block;
    margin: -9px 0;
    background-image: url("../image/ui/stats_icon.png");
    background-size: 288px var(--stats-icon-height);
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.hub-stat-icon--wigor { background-position: 0px 0; }
.hub-stat-icon--sila { background-position: -36px 0; }
.hub-stat-icon--zrecznosc { background-position: -72px 0; }
.hub-stat-icon--inteligencja { background-position: -108px 0; }
.hub-stat-icon--wiara { background-position: -144px 0; }
.hub-stat-icon--wytrzymalosc { background-position: -180px 0; }
.hub-stat-icon--szczescie { background-position: -216px 0; }
.hub-stat-icon--przeznaczenie { background-position: -252px 0; }

/* Wartosc klasy bez bonusu Relikwii. */
.hub-stat-row strong {
    color: #e4cf9f;
    font-size: 18px; font-weight: 600;
    text-align: right;
}

/* Bonus pochodzacy z aktywnych Relikwii; nie jest ponownie dodawany do liczby po lewej. */
.hub-stat-row em {
    color: #cc9a4f;
    font-style: normal;
    font-size: 16px;
    text-align: right;
}

.hub-nav {
    left: 320px;
    top: auto;
    bottom: -32px;
    width: 1280px;
    height: 384px;
    display: block;
    padding: 0; pointer-events: none;
    background: transparent url("../image/ui/window_down.png") center bottom / 1280px 384px no-repeat;
}

.hub-dock-button,
.hub-fight-button {
    position: absolute; pointer-events: auto;
    color: #cab488;
    font-family: var(--font-title);
    text-transform: uppercase;
    text-shadow: 0 2px 0 #000;
}

.hub-dock-button {
    padding-top: 70px;
    font-size: 14px;
}

.hub-fight-button {
    padding-top: 56px;
    font-size: 36px;
    text-transform: none;
}

.hub-dock-button::before,
.hub-fight-button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 20px;
    width: 64px;
    height: 72px;
    background-image: url("../image/ui/icon_button.png");
    background-size: 640px 72px;
    background-repeat: no-repeat;
    transform: translateX(-50%);
    pointer-events: none;
}

#hub-dice-btn { left: 32px; bottom: 64px; }
#hub-open-merge-btn { left: 176px; bottom: 64px; }
#hub-open-class-btn { left: 320px; bottom: 64px; }
#hub-start-run-btn { left: 456px; bottom: 56px; }
#hub-shop-btn { left: 796px; bottom: 64px; }
#hub-banner-btn { left: 940px; bottom: 64px; }
.hub-dock-button:disabled { filter:grayscale(.8) brightness(.5); cursor:not-allowed; }
.hub-dock-button:disabled .campaign-feature-label { position:absolute; left:10px; right:10px; bottom:8px; font-size:12px; line-height:1.15; }
#hub-back-menu-btn {left: 1084px; bottom: 64px;}

#hub-dice-btn::before { background-position: 0 0; }
#hub-open-merge-btn::before { background-position: -64px 0; }
#hub-open-class-btn::before { background-position: -128px 0; }
#hub-shop-btn::before { background-position: -192px 0; }
#hub-banner-btn::before { background-position: -448px 0; }
#hub-back-menu-btn::before { background-position: -320px 0; }
#hub-start-run-btn::before {
    top: 20px;
    background-position: -384px 0;
}

.hub-dock-button--placeholder {
    opacity: .58;
    filter: grayscale(.22);
}