/* _content/ShadowOfSlogar.Web/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-299ax0syx9] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-299ax0syx9] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* _content/ShadowOfSlogar.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.nav-loot-count[b-63posm6tlq] {
    font-family: var(--font-pixel);
    font-size: calc(5px * var(--px-scale));
    margin-left: 4px;
    flex-shrink: 0;
    color: inherit;
    transition: color var(--t-fast);
}
/* _content/ShadowOfSlogar.Web/Components/Layout/NotificationHost.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   NotificationHost.razor.css
   ═══════════════════════════════════════════════════════ */

/* ── Backdrop ── */
.notif-backdrop[b-qlxx20rfjy] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 1000;
    animation: notif-fade-in-b-qlxx20rfjy 0.1s ease;
}

/* ── Dialog ── */
.notif-dialog[b-qlxx20rfjy] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: min(440px, 90vw);
    background: var(--color-surface);
    box-shadow: 0 0 0 2px var(--notif-border, var(--gray-lightest)),
    6px 6px 0 var(--gray-darkest);
    animation: notif-pop-in-b-qlxx20rfjy 0.12s ease;
    overflow: hidden;
}

/* ── Top accent stripe (color per kind) ── */
.notif-stripe[b-qlxx20rfjy] {
    height: 3px;
    background: var(--notif-border, var(--gray-lightest));
}

/* ── Kind color tokens ── */
.notif-info[b-qlxx20rfjy] {
    --notif-border: var(--rarity-rare);
    --notif-icon-color: var(--rarity-rare);
}

.notif-warning[b-qlxx20rfjy] {
    --notif-border: var(--sand-mid);
    --notif-icon-color: var(--sand-mid);
}

.notif-error[b-qlxx20rfjy] {
    --notif-border: var(--red-mid);
    --notif-icon-color: var(--red-light);
}

.notif-confirm[b-qlxx20rfjy] {
    --notif-border: var(--gray-lightest);
    --notif-icon-color: var(--sand-light);
}

/* ── Inner padding ── */
.notif-inner[b-qlxx20rfjy] {
    padding: 20px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Header: icon + title ── */
.notif-header[b-qlxx20rfjy] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notif-icon[b-qlxx20rfjy] {
    font-size: calc(18px * var(--px-scale));
    color: var(--notif-icon-color, var(--sand-light));
    flex-shrink: 0;
    line-height: 1;
    width: 28px;
    text-align: center;
}

.notif-title[b-qlxx20rfjy] {
    font-family: var(--font-pixel);
    font-size: calc(8px * var(--px-scale));
    color: var(--sand-light);
    line-height: 1.5;
    letter-spacing: 0.5px;
}

/* ── Message ── */
.notif-message[b-qlxx20rfjy] {
    font-size: calc(12px * var(--px-scale));
    color: var(--color-text-dim);
    line-height: 1.7;
    padding: 10px 12px;
    background: var(--gray-darkest);
    box-shadow: var(--px-inset);
}

/* ── Action buttons ── */
.notif-actions[b-qlxx20rfjy] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Animations ── */
@keyframes notif-fade-in-b-qlxx20rfjy {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes notif-pop-in-b-qlxx20rfjy {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
/* _content/ShadowOfSlogar.Web/Components/Layout/TopBar.razor.rz.scp.css */
/* _content/ShadowOfSlogar.Web/Components/Pages/CharacterPage.razor.rz.scp.css */
.char-attr-header[b-qvjk7497jl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.char-attr-grid[b-qvjk7497jl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.char-attr-row[b-qvjk7497jl] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
}

.char-actions-row[b-qvjk7497jl] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .char-attr-row[b-qvjk7497jl] {
        grid-template-columns: 1fr auto;
    }
}
/* _content/ShadowOfSlogar.Web/Components/Pages/InventoryPage.razor.rz.scp.css */
/* ── Root: dwie sekcje pionowo ── */
.invpage[b-8v0w8y7rd4] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

/* ══════════════════════════════════════
   GEAR SECTION (góra)
   lewa: sloty, prawa: item details
   ══════════════════════════════════════ */
.invpage-gear-section[b-8v0w8y7rd4] {
    display: flex;
    flex-shrink: 0;
    border-bottom: 2px solid var(--color-border);
    max-height: 45%;
    min-height: 0;
    overflow: hidden;
}

.invpage-gear-left[b-8v0w8y7rd4] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    border-right: 2px solid var(--color-border);
}

.invpage-gear-right[b-8v0w8y7rd4] {
    width: var(--right-sidebar-size);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

/* ── Gear group ── */
.invpage-gear-group[b-8v0w8y7rd4] {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--color-border-sub);
    flex-shrink: 0;
}

.invpage-gear-group-label[b-8v0w8y7rd4] {
    margin-bottom: 6px;
}

.invpage-gear-slots[b-8v0w8y7rd4] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ── Single gear slot ── */
.invpage-gear-slot[b-8v0w8y7rd4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background var(--t-fast), box-shadow var(--t-fast);
    min-width: 110px;
    flex: 1;
    text-align: center;
}

.invpage-gear-slot.filled[b-8v0w8y7rd4] {
    background: var(--gray-darkest);
    box-shadow: var(--px-inset);
}

.invpage-gear-slot.filled:hover[b-8v0w8y7rd4] {
    background: var(--gray-mid);
}

.invpage-gear-slot.active[b-8v0w8y7rd4] {
    box-shadow: inset 0 0 0 2px var(--sand-light),
    inset 2px 2px 0 var(--sand-darkest) !important;
    background: var(--gray-mid);
}

.invpage-gear-slot.empty[b-8v0w8y7rd4] {
    background: var(--gray-darkest);
    box-shadow: var(--px-inset);
    opacity: 0.35;
    cursor: default;
}

/* ── Drag & Drop ── */
.invpage-gear-slot.drag-over[b-8v0w8y7rd4] {
    background: color-mix(in srgb, var(--lg-mid) 20%, var(--gray-mid));
    box-shadow: inset 0 0 0 2px var(--lg-light),
    inset 2px 2px 0 var(--lg-darkest) !important;
    opacity: 1;
}

.invpage-gear-slot.drag-over-invalid[b-8v0w8y7rd4] {
    background: color-mix(in srgb, var(--red-mid) 15%, var(--gray-mid));
    box-shadow: inset 0 0 0 2px var(--red-mid),
    inset 2px 2px 0 var(--red-darkest) !important;
    opacity: 1;
}

.invpage-gear-slot.dragging-source[b-8v0w8y7rd4] {
    opacity: 0.4;
    box-shadow: inset 0 0 0 2px var(--gray-lightest) !important;
}

/* Bag area jako drop target podczas drag z gear */
.invpage-bag-section.bag-drop-target[b-8v0w8y7rd4] {
    outline: 2px dashed var(--gray-light);
    outline-offset: -3px;
}

.invpage-bag-section.bag-drag-over[b-8v0w8y7rd4] {
    outline: 2px dashed var(--lg-mid);
    outline-offset: -3px;
    background: color-mix(in srgb, var(--lg-darkest) 30%, transparent);
}

.invpage-gear-icon[b-8v0w8y7rd4] {
    image-rendering: pixelated;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.invpage-gear-slot-info[b-8v0w8y7rd4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.invpage-gear-name[b-8v0w8y7rd4] {
    font-family: var(--font-pixel);
    font-size: calc(5px * var(--px-scale));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.invpage-gear-type[b-8v0w8y7rd4] {
    font-family: var(--font-ui);
    font-size: calc(5.5px * var(--px-scale));
    color: var(--color-text-muted);
}

.invpage-gear-slot-empty[b-8v0w8y7rd4] {
    opacity: 0.6;
}

/* ══════════════════════════════════════
   BAG SECTION (dół) — InventoryBox
   zajmuje resztę dostępnej przestrzeni
   ══════════════════════════════════════ */
.invpage-bag-section[b-8v0w8y7rd4] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .invpage-gear-section[b-8v0w8y7rd4] {
        flex-direction: column;
        max-height: none;
    }

    .invpage-gear-left[b-8v0w8y7rd4] {
        border-right: none;
        border-bottom: 2px solid var(--color-border);
        max-height: 40vh;
    }

    .invpage-gear-right[b-8v0w8y7rd4] {
        width: 100%;
        max-height: 35vh;
    }

    .invpage-gear-slot[b-8v0w8y7rd4] {
        min-width: 80px;
    }
}
/* _content/ShadowOfSlogar.Web/Components/Pages/LootPage.razor.rz.scp.css */
/* _content/ShadowOfSlogar.Web/Components/Pages/SkillsPage.razor.rz.scp.css */
.skills-bindings-grid[b-uo8s32th4e] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.skills-points-bar[b-uo8s32th4e] {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 600px) {
    .skills-bindings-grid[b-uo8s32th4e] {
        flex-direction: column;
    }
}
/* _content/ShadowOfSlogar.Web/Components/Pages/StashPage.razor.rz.scp.css */
/* _content/ShadowOfSlogar.Web/Components/Pages/WorldPage.razor.rz.scp.css */
.world-settings-grid[b-dcofouaea9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (max-width: 768px) {
    .world-settings-grid[b-dcofouaea9] {
        gap: 12px;
    }
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/AreaCard.razor.rz.scp.css */
.area-card[b-w6p36ispwz] {
    background: var(--color-surface);
    position: relative;
    overflow: visible;
    box-shadow: 0 0 0 2px var(--area-border, var(--gray-lightest)),
    3px 3px 0 var(--gray-darkest);
}

.area-card-completed[b-w6p36ispwz] {
    --area-border: var(--lg-mid);
}

.area-card-failed[b-w6p36ispwz] {
    --area-border: var(--red-mid);
}

.area-card-locked[b-w6p36ispwz] {
    --area-border: var(--gray-light);
    opacity: 0.6;
}

.area-card-unlocked[b-w6p36ispwz] {
    --area-border: var(--sand-mid);
}

.area-card-stripe[b-w6p36ispwz] {
    height: 3px;
    background: var(--area-border, var(--gray-lightest));
    flex-shrink: 0;
}

.area-card-inner[b-w6p36ispwz] {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.area-card-header[b-w6p36ispwz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

/* Nazwa area — pixel, główny nagłówek karty */
.area-card-name[b-w6p36ispwz] {
    font-family: var(--font-pixel);
    font-size: calc(7px * var(--px-scale));
    color: var(--sand-light);
    line-height: 1.5;
}

.area-card-badges[b-w6p36ispwz] {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.area-card-meta[b-w6p36ispwz] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.area-meta-item[b-w6p36ispwz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Wartość meta (np. Pack: 5) — pixel font, wyraźna */
.area-meta-item strong[b-w6p36ispwz] {
    font-family: var(--font-pixel);
    font-size: calc(6px * var(--px-scale));
    color: var(--sand-light);
    font-weight: normal;
}

.area-tier-row[b-w6p36ispwz] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.area-monster-tag[b-w6p36ispwz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--gray-darkest);
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    box-shadow: 0 0 0 1px var(--gray-light);
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.area-monster-tag:hover[b-w6p36ispwz] {
    box-shadow: 0 0 0 2px var(--sand-mid);
    transform: translateY(-1px);
}

/* Nazwa potwora — font-ui dla czytelności */
.area-monster-name[b-w6p36ispwz] {
    font-family: var(--font-ui);
    font-size: calc(6px * var(--px-scale));
    color: var(--sand-light);
}

.area-monster-count[b-w6p36ispwz] {
    font-family: var(--font-pixel);
    font-size: calc(4px * var(--px-scale));
    color: var(--gray-lightest);
}

.area-card-actions[b-w6p36ispwz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.area-timer[b-w6p36ispwz] {
    color: var(--sand-light);
    font-family: var(--font-pixel);
    font-size: calc(6px * var(--px-scale));
}

.area-stats-toggle[b-w6p36ispwz] {
    margin-left: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--gray-lightest);
    font-family: var(--font-pixel);
    font-size: calc(4.5px * var(--px-scale));
    padding: 4px 8px;
    box-shadow: 0 0 0 1px var(--gray-light);
    transition: color var(--t-fast), box-shadow var(--t-fast);
}

.area-stats-toggle:hover[b-w6p36ispwz] {
    color: var(--sand-light);
    box-shadow: 0 0 0 1px var(--sand-mid);
}

.area-stats-panel[b-w6p36ispwz] {
    border-top: 2px solid var(--color-border);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: dv-fadein var(--t-med) ease;
}

.area-stats-header[b-w6p36ispwz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.area-stats-death[b-w6p36ispwz] {
    color: var(--red-light);
    font-family: var(--font-pixel);
    font-size: calc(4.5px * var(--px-scale));
}

@media (max-width: 768px) {
    .area-card-header[b-w6p36ispwz] {
        flex-direction: column;
        gap: 6px;
    }

    .area-card-badges[b-w6p36ispwz] {
        justify-content: flex-start;
    }
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/BindingSlot.razor.rz.scp.css */
.binding-slot[b-xcpffx8bzi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--gray-darkest);
    box-shadow: inset 0 0 0 2px var(--gray-light);
    flex-shrink: 0;
}

.binding-slot-filled[b-xcpffx8bzi] {
    box-shadow: inset 0 0 0 2px var(--sand-mid);
}

/* Etykieta slotu (Basic Attack, Primary...) — mały pixel label */
.binding-slot-label[b-xcpffx8bzi] {
    font-family: var(--font-pixel);
    font-size: calc(4px * var(--px-scale));
    color: var(--gray-lightest);
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

.binding-select[b-xcpffx8bzi] {
    width: 160px;
    background: var(--gray-darkest);
    color: var(--sand-light);
    border: none;
    box-shadow: 0 0 0 2px var(--gray-light), 2px 2px 0 var(--gray-darkest);
    padding: 5px 24px 5px 8px;
    font-family: var(--font-pixel);
    font-size: calc(4.5px * var(--px-scale));
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Crect x='0' y='0' width='2' height='1' fill='%237a676f'/%3E%3Crect x='1' y='1' width='2' height='1' fill='%237a676f'/%3E%3Crect x='2' y='2' width='2' height='1' fill='%237a676f'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%237a676f'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%237a676f'/%3E%3Crect x='5' y='1' width='2' height='1' fill='%237a676f'/%3E%3Crect x='6' y='0' width='2' height='1' fill='%237a676f'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px 6px;
}

.binding-select:focus[b-xcpffx8bzi] {
    outline: none;
    box-shadow: 0 0 0 2px var(--sand-mid), 2px 2px 0 var(--gray-darkest);
}

.binding-select option[b-xcpffx8bzi] {
    background: var(--gray-dark);
    color: var(--sand-light);
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/Button.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   Button.razor.css  — scoped to ::deep .dv-btn
   ═══════════════════════════════════════════════════════ */

/* ── Base ── */
.dv-btn[b-0qmlitws2w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    font-family: var(--font-pixel);
    font-size: calc(7px * var(--px-scale));
    color: var(--sand-light);
    line-height: 1;

    border: none;
    cursor: pointer;
    padding: 8px 14px;

    position: relative;
    transition: transform 0.06s, background 0.08s;
    user-select: none;
    white-space: nowrap;

    /* Pixel outline + drop shadow via ::after */
}

/* Pixel border + shadow layer */
.dv-btn[b-0qmlitws2w]::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: 0 0 0 2px var(--btn-border, var(--gray-lightest)),
    3px 3px 0 var(--gray-darkest);
    pointer-events: none;
}

/* Press effect */
.dv-btn:not(:disabled):active[b-0qmlitws2w] {
    transform: translate(2px, 2px);
}

.dv-btn:not(:disabled):active[b-0qmlitws2w]::after {
    box-shadow: 0 0 0 2px var(--btn-border, var(--gray-lightest)),
    1px 1px 0 var(--gray-darkest);
}

/* Disabled */
.dv-btn:disabled[b-0qmlitws2w] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Sizes ── */
.dv-btn-sm[b-0qmlitws2w] {
    padding: 5px 10px;
    font-size: calc(6px  * var(--px-scale));
}

.dv-btn-lg[b-0qmlitws2w] {
    padding: 11px 20px;
    font-size: calc(8px  * var(--px-scale));
}

.dv-btn-full[b-0qmlitws2w] {
    width: 100%;
}

/* ── Variants ── */
.dv-btn-primary[b-0qmlitws2w] {
    background: var(--red-darkest);
    --btn-border: var(--red-mid);
}

.dv-btn-primary:not(:disabled):hover[b-0qmlitws2w] {
    background: var(--red-dark);
}

.dv-btn-secondary[b-0qmlitws2w] {
    background: var(--lg-darkest);
    --btn-border: var(--lg-mid);
}

.dv-btn-secondary:not(:disabled):hover[b-0qmlitws2w] {
    background: var(--lg-dark);
}

.dv-btn-sand[b-0qmlitws2w] {
    background: var(--sand-darkest);
    --btn-border: var(--sand-mid);
}

.dv-btn-sand:not(:disabled):hover[b-0qmlitws2w] {
    background: var(--sand-dark);
}

.dv-btn-dg[b-0qmlitws2w] {
    background: var(--dg-darkest);
    --btn-border: var(--dg-mid);
}

.dv-btn-dg:not(:disabled):hover[b-0qmlitws2w] {
    background: var(--dg-dark);
}

.dv-btn-ghost[b-0qmlitws2w] {
    background: transparent;
    --btn-border: var(--gray-light);
}

.dv-btn-ghost:not(:disabled):hover[b-0qmlitws2w] {
    background: var(--gray-dark);
}

.dv-btn-warn[b-0qmlitws2w] {
    background: var(--red-darkest);
    --btn-border: var(--red-light);
}

.dv-btn-warn:not(:disabled):hover[b-0qmlitws2w] {
    background: var(--red-dark);
}

/* ── Sub-elements ── */
.dv-btn-icon[b-0qmlitws2w] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.dv-btn-icon svg[b-0qmlitws2w] {
    image-rendering: pixelated;
    display: block;
}

.dv-btn-label[b-0qmlitws2w] {
    /* keeps text from wrapping if icon is present */
}

/* Badge bubble (e.g. notification count) */
.dv-btn-badge[b-0qmlitws2w] {
    font-family: var(--font-pixel);
    font-size: calc(5px  * var(--px-scale));
    background: var(--red-dark);
    color: var(--sand-light);
    padding: 1px 5px;
    margin-left: 2px;
    box-shadow: 1px 1px 0 var(--gray-darkest);
}

/* Loading spinner */
.dv-btn-loading[b-0qmlitws2w] {
    pointer-events: none;
}

.dv-btn-spinner[b-0qmlitws2w] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 2px solid var(--gray-lightest);
    border-top-color: var(--sand-light);
    border-radius: 50%;
    animation: dv-btn-spin-b-0qmlitws2w 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes dv-btn-spin-b-0qmlitws2w {
    to {
        transform: rotate(360deg);
    }
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/ButtonComponent.razor.rz.scp.css */
.my-button[b-50qa2fvmli] {
    background-image: url(images/UX/UXButton4.png);
    background-color: transparent;
    background-repeat: no-repeat;
    width: 144px;
    height: 24px;
    border: none;
    color: var(--s-ux-strong-color);
    cursor: pointer;
    font-size: calc(4px  * var(--px-scale));
}

.my-button:disabled[b-50qa2fvmli], .my-button:disabled:hover[b-50qa2fvmli] {
    cursor: default;
    filter: brightness(0.75);
}

.size-4[b-50qa2fvmli] {
    background-image: url(images/UX/UXButton4.png);
    width: 144px;
}

.size-6[b-50qa2fvmli] {
    background-image: url(images/UX/UXButton6.png);
    width: 216px;
}

.size-8[b-50qa2fvmli] {
    background-image: url(images/UX/UXButton8.png);
    width: 288px;
}

.my-button:hover[b-50qa2fvmli] {
    filter: brightness(1.5);
    transition: filter 0.2s ease;
}

.highlighted[b-50qa2fvmli] {
    filter: brightness(1.40);
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/CardComponent.razor.rz.scp.css */
.card-outline[b-vnemcjsb6j] {
    background-color: var(--s-dark-green-darkest);
    border: 2px solid var(--s-dark-green-darkest);
}

.card[b-vnemcjsb6j] {
    background-color: var(--s-dark-green-darkest);
    border-top: 2px solid var(--s-light-green-light);
    border-left: 2px solid var(--s-light-green-light);
    border-bottom: 2px solid var(--s-light-green-darkest);
    border-right: 2px solid var(--s-light-green-darkest);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/FilterRow.razor.rz.scp.css */
.frow[b-8wjz0hmxbu] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.frow-label[b-8wjz0hmxbu] {
    flex-shrink: 0;
    min-width: 36px;
}

.frow-controls[b-8wjz0hmxbu] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/InventoryBox.razor.rz.scp.css */
/* ── Root: dwa panele obok siebie ── */
.invbox-root[b-39ub0l9ym7] {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

/* ── Lewa kolumna: lista itemów ── */
.invbox-left[b-39ub0l9ym7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 2px solid var(--color-border);
    overflow: hidden;
    min-height: 0;
}

/* ── Prawa kolumna: item details ── */
.invbox-right[b-39ub0l9ym7] {
    width: var(--right-sidebar-size);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

.invbox-filters[b-39ub0l9ym7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 2px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-surface);
}

.invbox-toolbar[b-39ub0l9ym7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 12px;
    border-bottom: 2px solid var(--color-border-sub);
    flex-shrink: 0;
    background: var(--color-surface);
}

.invbox-bulk-actions[b-39ub0l9ym7] {
    display: flex;
    gap: 4px;
}

/* ── Grid kart ── */
.invbox-grid[b-39ub0l9ym7] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    padding: 6px;
}

/* ── Karta itemu ── */
.invbox-card[b-39ub0l9ym7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    width: 300px;
    flex-shrink: 0;
    background: var(--gray-darkest);
    box-shadow: var(--px-inset);
    position: relative;
    transition: background var(--t-fast), box-shadow var(--t-fast);
    user-select: none;
}

.invbox-card:hover[b-39ub0l9ym7] {
    background: var(--gray-mid);
    box-shadow: inset 0 0 0 2px var(--gray-lightest);
}

.invbox-card-selected[b-39ub0l9ym7],
.invbox-card-selected:hover[b-39ub0l9ym7] {
    background: var(--gray-mid) !important;
    box-shadow: inset 0 0 0 2px var(--sand-light),
    inset 2px 2px 0 var(--sand-darkest) !important;
}

.invbox-card-magic.invbox-card-selected[b-39ub0l9ym7] {
    box-shadow: inset 0 0 0 2px var(--rarity-rare),
    inset 2px 2px 0 color-mix(in srgb, var(--rarity-rare) 40%, var(--gray-darkest)) !important;
}

.invbox-card-rare.invbox-card-selected[b-39ub0l9ym7] {
    box-shadow: inset 0 0 0 2px var(--rarity-epic),
    inset 2px 2px 0 color-mix(in srgb, var(--rarity-epic) 40%, var(--gray-darkest)) !important;
}

.invbox-card-icon[b-39ub0l9ym7] {
    image-rendering: pixelated;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.invbox-card-body[b-39ub0l9ym7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.invbox-card-name[b-39ub0l9ym7] {
    font-family: var(--font-pixel);
    font-size: calc(5.5px * var(--px-scale));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.invbox-card-count[b-39ub0l9ym7] {
    font-family: var(--font-pixel);
    font-size: calc(4.5px * var(--px-scale));
    color: var(--gray-lightest);
    margin-left: 4px;
}

.invbox-card-sub[b-39ub0l9ym7] {
    font-family: var(--font-ui);
    font-size: calc(5.5px * var(--px-scale));
    color: var(--color-text-muted);
}

.invbox-card-pip[b-39ub0l9ym7] {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
}

/* ── Empty state ── */
.invbox-empty[b-39ub0l9ym7] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0.5;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .invbox-root[b-39ub0l9ym7] {
        flex-direction: column;
    }

    .invbox-left[b-39ub0l9ym7] {
        border-right: none;
        border-bottom: 2px solid var(--color-border);
        max-height: 55vh;
    }

    .invbox-right[b-39ub0l9ym7] {
        width: 100%;
        max-height: 45vh;
    }
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/ItemDetails.razor.rz.scp.css */
.itemdet[b-n3844ojlz5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

/* ── Header: ikona + nazwa ── */
.itemdet-header[b-n3844ojlz5] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-shrink: 0;
}

.itemdet-icon-wrap[b-n3844ojlz5] {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    background: var(--gray-darkest);
    box-shadow: var(--px-inset);
    display: flex;
    align-items: center;
    justify-content: center;
}

.itemdet-icon-magic[b-n3844ojlz5] {
    box-shadow: var(--px-inset),
    0 0 12px 2px color-mix(in srgb, var(--rarity-rare) 30%, transparent);
}

.itemdet-icon-rare[b-n3844ojlz5] {
    box-shadow: var(--px-inset),
    0 0 14px 3px color-mix(in srgb, var(--rarity-epic) 35%, transparent);
}

.itemdet-icon[b-n3844ojlz5] {
    image-rendering: pixelated;
    width: 64px;
    height: 64px;
}

.itemdet-header-info[b-n3844ojlz5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

/* Nazwa itemu — główny nagłówek, pixel font */
.itemdet-name[b-n3844ojlz5] {
    font-family: var(--font-pixel);
    font-size: calc(7px * var(--px-scale));
    line-height: 1.5;
    word-break: break-word;
}

.itemdet-count[b-n3844ojlz5] {
    font-family: var(--font-pixel);
    font-size: calc(5px * var(--px-scale));
    color: var(--gray-lightest);
    margin-left: 6px;
}

/* Typ itemu — font-ui, muted, wyraźnie mniejszy niż nazwa */
.itemdet-type[b-n3844ojlz5] {
    font-family: var(--font-ui);
    font-size: calc(6px * var(--px-scale));
    color: var(--rg-light);
}

.itemdet-ilevel[b-n3844ojlz5] {
    margin-top: 2px;
}

/* ── Sekcje (Base Stats, Modifiers, Requirements) ── */
.itemdet-section[b-n3844ojlz5] {
    background: var(--gray-darkest);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.itemdet-section-affixes[b-n3844ojlz5] {
    border-left: 3px solid var(--rarity-rare);
}

/* Linia afiksa — font-ui żeby był czytelny przy dłuższych opisach */
.itemdet-affix-line[b-n3844ojlz5] {
    font-family: var(--font-ui);
    font-size: calc(6px * var(--px-scale));
    color: var(--rarity-rare);
    line-height: 1.6;
}

.itemdet-req-ok[b-n3844ojlz5] {
    color: var(--sand-light);
}

.itemdet-req-fail[b-n3844ojlz5] {
    color: var(--red-light);
}

/* ── Ceny ── */
.itemdet-price-row[b-n3844ojlz5] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.itemdet-price-chip[b-n3844ojlz5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--gray-darkest);
    padding: 6px 12px;
    flex: 1;
    box-shadow: var(--px-inset);
}

.itemdet-price-buy[b-n3844ojlz5] {
    box-shadow: inset 0 0 0 2px var(--sand-darkest);
}

/* Wartość ceny — pixel, jasna, wyraźna */
.itemdet-price-val[b-n3844ojlz5] {
    font-family: var(--font-pixel);
    font-size: calc(7px * var(--px-scale));
    color: var(--sand-light);
}

/* ── Akcje ── */
.itemdet-actions[b-n3844ojlz5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

.itemdet-empty[b-n3844ojlz5] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/ItemTooltip.razor.rz.scp.css */
.ittt-wrap[b-r79yfb7iox] {
    display: contents;
}

/* ── Tooltip box ── */
.ittt[b-r79yfb7iox] {
    width: 300px;
    pointer-events: none;
    background: var(--gray-dark);
    box-shadow: 0 0 0 2px var(--gray-lightest),
    5px 5px 0 var(--gray-darkest),
    0 20px 60px rgba(0, 0, 0, 0.8);
    animation: ittt-appear-b-r79yfb7iox 0.07s ease forwards;
}

/* Szeroki tooltip kiedy jest porównanie */
.ittt-wide[b-r79yfb7iox] {
    width: 610px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* ── Panele porównania ── */
.ittt-compare-panel[b-r79yfb7iox] {
    order: 2;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--red-darkest) 15%, var(--gray-dark));
}

.ittt-main-panel[b-r79yfb7iox] {
    order: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ittt-compare-divider[b-r79yfb7iox] {
    width: 2px;
    background: var(--gray-light);
    flex-shrink: 0;
}

/* Label "Equipped" / "Item" nad każdym panelem */
.ittt-compare-label[b-r79yfb7iox] {
    padding: 5px 10px 3px;
    border-bottom: 1px solid var(--color-border-sub);
    background: var(--gray-darkest);
    letter-spacing: 3px;
}

/* ItemDetails wewnątrz tooltipa — override */
.ittt[b-r79yfb7iox]  .itemdet {
    padding: 0;
    overflow: visible;
    height: auto;
    gap: 0;
}

.ittt[b-r79yfb7iox]  .itemdet-empty {
    display: none;
}

/* ── Ring hint bar pod tooltipem ── */
.ittt-ring-hint[b-r79yfb7iox] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--gray-darkest);
    box-shadow: 0 0 0 2px var(--gray-lightest),
    5px 5px 0 var(--gray-darkest);
    margin-top: 2px;
    pointer-events: none;
    animation: ittt-appear-b-r79yfb7iox 0.07s ease forwards;
}

.ittt-ring-hint-icon[b-r79yfb7iox] {
    font-size: calc(5px * var(--px-scale));
    color: var(--sand-mid);
    opacity: 0.7;
}

.ittt-ring-hint-text[b-r79yfb7iox] {
    font-family: var(--font-pixel);
    font-size: calc(3.5px * var(--px-scale));
    color: var(--gray-lightest);
    letter-spacing: 1px;
}

.ittt-ring-hint-sep[b-r79yfb7iox] {
    color: var(--gray-light);
    font-size: calc(4px * var(--px-scale));
}

/* Klawisz (1, 2, 3, 4) */
.ittt-key[b-r79yfb7iox] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-family: var(--font-pixel);
    font-size: calc(3.5px * var(--px-scale));
    color: var(--sand-light);
    background: var(--gray-mid);
    box-shadow: 0 0 0 1px var(--gray-lightest), 1px 1px 0 var(--gray-darkest);
    line-height: 1;
}

.ittt-ring-hint-keys[b-r79yfb7iox] {
    display: flex;
    gap: 2px;
}

@keyframes ittt-appear-b-r79yfb7iox {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/MiniHeader.razor.rz.scp.css */
.detail-panel-header[b-1nc57mizdu] {
    padding: 8px 14px 4px;
    flex-shrink: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-sub);
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/NavButton.razor.rz.scp.css */
.dv-navbtn[b-ew1r26ouit] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    width: 100%;

    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--sand-dark);

    /* font-ui dla lepszej czytelności długich etykiet */
    font-size: calc(6px * var(--px-scale));
    font-family: var(--font-ui);
    text-align: left;

    position: relative;
    transition: background var(--t-fast), color var(--t-fast);
    user-select: none;
}

.dv-navbtn:hover[b-ew1r26ouit] {
    background: var(--gray-light);
    color: var(--sand-light);
}

.dv-navbtn.active[b-ew1r26ouit] {
    background: var(--gray-light);
    color: var(--sand-light);
}

/* Left accent bar when active */
.dv-navbtn.active[b-ew1r26ouit]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 3px;
    background: var(--red-light);
}

/* Icon wrapper */
.dv-navbtn-icon[b-ew1r26ouit] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    opacity: 0.8;
    transition: opacity var(--t-fast);
}

.dv-navbtn.active .dv-navbtn-icon[b-ew1r26ouit],
.dv-navbtn:hover .dv-navbtn-icon[b-ew1r26ouit] {
    opacity: 1;
}

.dv-navbtn-icon svg[b-ew1r26ouit] {
    image-rendering: pixelated;
    display: block;
}

/* Label */
.dv-navbtn-label[b-ew1r26ouit] {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Badge */
.dv-navbtn-badge[b-ew1r26ouit] {
    margin-left: auto;
    font-family: var(--font-pixel);
    font-size: calc(4.5px * var(--px-scale));
    background: var(--red-dark);
    color: var(--sand-light);
    padding: 2px 5px;
    box-shadow: 1px 1px 0 var(--gray-darkest);
    flex-shrink: 0;
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/PageLayout.razor.rz.scp.css */
.dv-page[b-hdywppnqb3] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Header bar with title + optional actions ── */
.dv-page-header[b-hdywppnqb3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 10px 16px 8px;
    flex-shrink: 0;

    border-bottom: 2px solid var(--color-border);
    background: var(--color-surface);
}

/* Tytuł strony — największy element, pixel font */
.dv-page-title[b-hdywppnqb3] {
    font-family: var(--font-pixel);
    font-size: calc(8px * var(--px-scale));
    color: var(--sand-light);
    letter-spacing: 1px;
    line-height: 1.4;

    margin: 0;
    font-weight: normal;
}

.dv-page-header-actions[b-hdywppnqb3] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Content body ── */
.dv-page-body[b-hdywppnqb3] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dv-page-body-pad[b-hdywppnqb3] {
    padding: 14px;
}

.dv-page-body-scroll[b-hdywppnqb3] {
    overflow-y: auto;
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/Panel.razor.rz.scp.css */
.dv-panel[b-bh6le2n6da] {
    background: var(--color-surface);
    box-shadow: var(--px-shadow);
    display: flex;
    flex-direction: column;
}

.dv-panel-inset[b-bh6le2n6da] {
    background: var(--gray-darkest);
    box-shadow: var(--px-inset);
}

.dv-panel-dark[b-bh6le2n6da] {
    background: var(--gray-darkest);
    box-shadow: 0 0 0 2px var(--gray-mid), 3px 3px 0 var(--gray-darkest);
}

/* ── Header ── */
.dv-panel-header[b-bh6le2n6da] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 6px;
    border-bottom: 2px solid var(--color-border);
    flex-shrink: 0;
}

/* Tytuł panelu — pixel font, wyraźny */
.dv-panel-title[b-bh6le2n6da] {
    font-family: var(--font-pixel);
    font-size: calc(6px * var(--px-scale));
    color: var(--sand-light);
    flex: 1;
    letter-spacing: 0.5px;
}

.dv-panel-badge[b-bh6le2n6da] {
    font-family: var(--font-ui);
    font-size: calc(6px * var(--px-scale));
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.dv-panel-title-actions[b-bh6le2n6da] {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Body ── */
.dv-panel-body[b-bh6le2n6da] {
    padding: 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dv-panel-body-nopad[b-bh6le2n6da] {
    padding: 0;
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/PanelComponent.razor.rz.scp.css */
.panel[b-goercmc19c] {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: 32px 1fr 32px;
    grid-template-rows: 32px 1fr 32px;

    padding: 4px;

    color: var(--s-skin-light);
}

.panel[b-goercmc19c]::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("images/UX/UXTexture01.png");
    background-repeat: repeat;
    pointer-events: none;
    image-rendering: pixelated;
    opacity: 0.05;
}

.panel > div[b-goercmc19c] {
    background-size: 100% 100%;
}

.panel-tl[b-goercmc19c] {
    background-image: url("images/UX/UXPanelTopLeft.png");
    image-rendering: pixelated;
}

.panel-tr[b-goercmc19c] {
    background-image: url("images/UX/UXPanelTopRight.png");
    image-rendering: pixelated;
}

.panel-bl[b-goercmc19c] {
    background-image: url("images/UX/UXPanelBottomLeft.png");
    image-rendering: pixelated;
}

.panel-br[b-goercmc19c] {
    background-image: url("images/UX/UXPanelBottomRight.png");
    image-rendering: pixelated;
}

.panel-t[b-goercmc19c] {
    background-image: url("images/UX/UXPanelTop.png");
    background-repeat: repeat-x;
    image-rendering: pixelated;
}

.panel-b[b-goercmc19c] {
    background-image: url("images/UX/UXPanelBottom.png");
    background-repeat: repeat-x;
    image-rendering: pixelated;
}

.panel-l[b-goercmc19c] {
    background-image: url("images/UX/UXPanelLeft.png");
    background-repeat: repeat-y;
    image-rendering: pixelated;
}

.panel-r[b-goercmc19c] {
    background-image: url("images/UX/UXPanelRight.png");
    background-repeat: repeat-y;
    image-rendering: pixelated;
}

.panel-c[b-goercmc19c] {
    background-image: url("images/UX/UXPanelCenter.png");
    background-repeat: repeat;
    image-rendering: pixelated;
}

.root-container[b-goercmc19c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/PixelCheckBox.razor.rz.scp.css */
.px-checkbox[b-lbq44p4410] {
    font-family: var(--font-pixel);
    font-size: calc(4.5px * var(--px-scale));
    padding: 3px 8px;
    cursor: pointer;
    background: var(--gray-darkest);
    color: var(--gray-lightest);
    box-shadow: 0 0 0 2px var(--gray-light), 2px 2px 0 var(--gray-darkest);
    user-select: none;
    transition: background var(--t-fast), color var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.px-checkbox input[type="checkbox"][b-lbq44p4410] {
    display: none;
}

.px-checkbox:hover[b-lbq44p4410] {
    background: var(--gray-light);
    color: var(--sand-light);
}

.px-checkbox.active[b-lbq44p4410] {
    background: var(--red-darkest);
    color: var(--sand-light);
    box-shadow: 0 0 0 2px var(--red-mid), 2px 2px 0 var(--gray-darkest);
}

.px-checkbox-mark[b-lbq44p4410] {
    font-family: var(--font-ui);
    font-size: calc(5.5px * var(--px-scale));
    line-height: 1;
    flex-shrink: 0;
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/PixelRadioGroup.razor.rz.scp.css */
.px-radio-group[b-57dqhzuyrd] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.px-radio-pill[b-57dqhzuyrd] {
    font-family: var(--font-pixel);
    font-size: calc(4.5px * var(--px-scale));
    padding: 3px 8px;
    cursor: pointer;
    background: var(--gray-darkest);
    color: var(--gray-lightest);
    box-shadow: 0 0 0 2px var(--gray-light), 2px 2px 0 var(--gray-darkest);
    user-select: none;
    transition: background var(--t-fast), color var(--t-fast);
    display: inline-block;
    white-space: nowrap;
}

.px-radio-pill input[type="radio"][b-57dqhzuyrd] {
    display: none;
}

.px-radio-pill:hover[b-57dqhzuyrd] {
    background: var(--gray-light);
    color: var(--sand-light);
}

.px-radio-pill.active[b-57dqhzuyrd] {
    background: var(--red-darkest);
    color: var(--sand-light);
    box-shadow: 0 0 0 2px var(--red-mid), 2px 2px 0 var(--gray-darkest);
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/SectionTitle.razor.rz.scp.css */
.dv-section-title[b-oq8wjfu5bs] {
    font-family: var(--font-pixel);
    font-size: calc(4.5px * var(--px-scale));
    color: var(--color-text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--color-border-sub);
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/SkillCard.razor.rz.scp.css */
.skill-card[b-kq5v5pbio3] {
    background: var(--color-surface);
    box-shadow: var(--px-shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    position: relative;
    overflow: visible;
    transition: box-shadow var(--t-fast);
}

.skill-card-bound[b-kq5v5pbio3] {
    box-shadow: 0 0 0 2px var(--sand-mid), 3px 3px 0 var(--gray-darkest);
}

/* ── Header: nazwa + meta tagi ── */
.skill-card-header[b-kq5v5pbio3] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Nazwa skilla — pixel font, główny nagłówek karty */
.skill-card-name[b-kq5v5pbio3] {
    font-family: var(--font-pixel);
    font-size: calc(7px * var(--px-scale));
    color: var(--sand-light);
    line-height: 1.5;
}

.skill-card-meta[b-kq5v5pbio3] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.skill-card-actions[b-kq5v5pbio3] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Bloki poziomów (Current / Next) ── */
.skill-level-block[b-kq5v5pbio3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
}

.skill-level-current[b-kq5v5pbio3] {
    background: var(--gray-darkest);
}

.skill-level-next[b-kq5v5pbio3] {
    background: var(--lg-darkest);
    opacity: 0.85;
    border-top: 1px dashed var(--lg-mid);
}

/* Linia atrybutu skilla — font-ui dla czytelności dłuższych opisów */
.skill-attr-line[b-kq5v5pbio3] {
    font-family: var(--font-ui);
    font-size: calc(6px * var(--px-scale));
    color: var(--rarity-rare);
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.5;
}

.skill-attr-improved[b-kq5v5pbio3] {
    color: #7adb6a;
}

/* Strzałka "poprawiono" — pixel, mała */
.skill-attr-arrow[b-kq5v5pbio3] {
    font-family: var(--font-pixel);
    font-size: calc(5px * var(--px-scale));
    color: #7adb6a;
    flex-shrink: 0;
}

.skill-stat-free[b-kq5v5pbio3] {
    color: #7adb6a;
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/StatBar.razor.rz.scp.css */
.dv-statbar[b-jo3olmjl1r] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dv-statbar-compact[b-jo3olmjl1r] {
    gap: 2px;
}

/* Label row: label po lewej (font-ui, muted), wartość po prawej (pixel, jasna) */
.dv-statbar-label-row[b-jo3olmjl1r] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.dv-statbar-label[b-jo3olmjl1r] {
    font-family: var(--font-ui);
    font-size: calc(6px * var(--px-scale));
    color: var(--sand-dark);
}

.dv-statbar-val[b-jo3olmjl1r] {
    font-family: var(--font-pixel);
    font-size: calc(6px * var(--px-scale));
    color: var(--sand-light);
}

.dv-statbar-track[b-jo3olmjl1r] {
    height: 8px;
    background: var(--gray-darkest);
    box-shadow: var(--px-inset);
    position: relative;
    overflow: hidden;
}

.dv-statbar-compact .dv-statbar-track[b-jo3olmjl1r] {
    height: 5px;
}

.dv-statbar-fill[b-jo3olmjl1r] {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.4s steps(14);
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/StatGroup.razor.rz.scp.css */
.dv-statgroup[b-vht4rraxc0] {
    display: flex;
    flex-direction: column;
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/StatRow.razor.rz.scp.css */
.dv-srow[b-qatudwjqzy] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid #2a2027;
}

.dv-srow:last-child[b-qatudwjqzy] {
    border: none;
}

/* Label — font-ui żeby był czytelny, muted kolor */
.dv-srow-label[b-qatudwjqzy] {
    font-family: var(--font-ui);
    font-size: calc(6px * var(--px-scale));
    color: var(--sand-dark);
    flex: 1;
}

/* Wartość — pixel font, wyraźnie większa od labela */
.dv-srow-val[b-qatudwjqzy] {
    font-family: var(--font-pixel);
    font-size: calc(7px * var(--px-scale));
    color: var(--sand-light);
}

/* LabelOnly — kiedy cały wiersz to nagłówek sekcji */
.dv-srow-label-only .dv-srow-label[b-qatudwjqzy] {
    color: var(--color-text-muted);
    font-family: var(--font-pixel);
    font-size: calc(4.5px * var(--px-scale));
    letter-spacing: 2px;
    text-transform: uppercase;
    flex: 1;
}
/* _content/ShadowOfSlogar.Web/Components/Reusables/TagBadge.razor.rz.scp.css */
.dv-tag[b-cjshcdcw9g] {
    font-family: var(--font-pixel);
    font-size: calc(4.5px * var(--px-scale));
    padding: 2px 6px;
    display: inline-block;
    line-height: 1.6;
    white-space: nowrap;
}

.dv-tag-primary[b-cjshcdcw9g] {
    background: var(--red-darkest);
    color: var(--red-light);
    box-shadow: 0 0 0 1px var(--red-mid);
}

.dv-tag-sand[b-cjshcdcw9g] {
    background: var(--sand-darkest);
    color: var(--sand-light);
    box-shadow: 0 0 0 1px var(--sand-mid);
}

.dv-tag-green[b-cjshcdcw9g] {
    background: var(--lg-darkest);
    color: var(--lg-light);
    box-shadow: 0 0 0 1px var(--lg-mid);
}

.dv-tag-red[b-cjshcdcw9g] {
    background: var(--red-darkest);
    color: var(--red-light);
    box-shadow: 0 0 0 1px var(--red-mid);
}

.dv-tag-rare[b-cjshcdcw9g] {
    background: color-mix(in srgb, var(--rarity-rare) 15%, var(--gray-darkest));
    color: var(--rarity-rare);
    box-shadow: 0 0 0 1px var(--rarity-rare);
}

.dv-tag-epic[b-cjshcdcw9g] {
    background: color-mix(in srgb, var(--rarity-epic) 15%, var(--gray-darkest));
    color: var(--rarity-epic);
    box-shadow: 0 0 0 1px var(--rarity-epic);
}

.dv-tag-legend[b-cjshcdcw9g] {
    background: color-mix(in srgb, var(--rarity-legend) 15%, var(--gray-darkest));
    color: var(--rarity-legend);
    box-shadow: 0 0 0 1px var(--rarity-legend);
}

.dv-tag-muted[b-cjshcdcw9g] {
    background: var(--gray-darkest);
    color: var(--gray-lightest);
    box-shadow: 0 0 0 1px var(--gray-light);
}

.dv-tag-dark[b-cjshcdcw9g] {
    background: var(--dg-darkest);
    color: var(--dg-light);
    box-shadow: 0 0 0 1px var(--dg-mid);
}