:root{
    --color-bg-table:rgba(15,15,20,0.95);
    --color-tier-1:#9ca3af;
    --color-tier-2:#22c55e;
    --color-tier-3:#f97316;
    --color-tier-unique:#a855f7;
    --color-gravity:#b8860b;
    --color-chemical:#10b981;
    --color-electric:#3b82f6;
    --color-thermal:#ef4444;
    --color-frost:#38bdf8
}

.bg-overlay{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background:url("../images/hero.png") no-repeat center center;
    background-size:cover;
    z-index:-2
}
.bg-overlay::before{
    content:'';
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    background:linear-gradient(180deg,rgba(10,10,11,0.85) 0%,rgba(10,10,11,0.95) 30%,rgba(10,10,11,0.98) 100%)
}

.categories-nav{
    padding:20px 0 40px;
    position:sticky;
    top:var(--header-height);
    z-index:100;
    background:rgba(10,10,11,0.9);
    backdrop-filter:blur(10px)
}
.categories-nav__list{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.category-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 20px;
    font-size:14px;
    font-weight:500;
    color:var(--color-text-muted);
    text-decoration:none;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--color-border);
    border-radius:10px;
    transition:var(--transition)
}
.category-btn:hover{background:rgba(255,255,255,0.1);color:var(--color-text)}
.category-btn__icon{font-size:10px}
.category-btn--gravity:hover{border-color:var(--color-gravity);color:var(--color-gravity)}
.category-btn--chemical:hover{border-color:var(--color-chemical);color:var(--color-chemical)}
.category-btn--electric:hover{border-color:var(--color-electric);color:var(--color-electric)}
.category-btn--thermal:hover{border-color:var(--color-thermal);color:var(--color-thermal)}
.category-btn--unique:hover{border-color:var(--color-tier-unique);color:var(--color-tier-unique)}
.category-btn--frost:hover{border-color:var(--color-frost);color:var(--color-frost)}

.artifacts-section{padding:20px 0 80px}
.artifact-category{margin-bottom:60px}
.artifact-category:last-child{margin-bottom:0}

.category-header{
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px 24px;
    background:var(--color-bg-card);
    border:1px solid var(--color-border);
    border-radius:16px 16px 0 0;
    margin-bottom:-1px
}
.category-header__icon{
    width:48px;height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.05);
    border-radius:12px
}
.category-header__icon svg{width:24px;height:24px}
.category-header--gravity .category-header__icon{background:rgba(184,134,11,0.2);color:var(--color-gravity)}
.category-header--chemical .category-header__icon{background:rgba(16,185,129,0.2);color:var(--color-chemical)}
.category-header--electric .category-header__icon{background:rgba(59,130,246,0.2);color:var(--color-electric)}
.category-header--thermal .category-header__icon{background:rgba(239,68,68,0.2);color:var(--color-thermal)}
.category-header--unique .category-header__icon{background:rgba(168,85,247,0.2);color:var(--color-tier-unique)}
.category-header--frost .category-header__icon{background:rgba(56,189,248,0.2);color:var(--color-frost)}
.category-header__title{
    flex:1;
    font-family:var(--font-heading);
    font-size:24px;
    font-weight:500;
    letter-spacing:1px
}
.category-header__count{
    font-size:13px;
    color:var(--color-text-muted);
    padding:6px 14px;
    background:rgba(255,255,255,0.05);
    border-radius:20px
}
.category-header__event{
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    padding:6px 14px;
    background:linear-gradient(135deg,rgba(56,189,248,0.2) 0%,rgba(147,51,234,0.2) 100%);
    color:var(--color-frost);
    border:1px solid rgba(56,189,248,0.3);
    border-radius:20px;
    animation:eventPulse 2s ease-in-out infinite
}
@keyframes eventPulse{
    0%,100%{box-shadow:0 0 5px rgba(56,189,248,0.3)}
    50%{box-shadow:0 0 15px rgba(56,189,248,0.5)}
}

.artifacts-table-wrapper{
    overflow-x:auto;
    position:relative;
    background:var(--color-bg-table);
    border:1px solid var(--color-border);
    border-radius:0 0 16px 16px
}
.artifacts-table-wrapper::after{
    content:'';
    position:sticky;
    right:0;
    top:0;
    bottom:0;
    width:40px;
    background:linear-gradient(to left,rgba(15,15,20,0.95),transparent);
    pointer-events:none;
    display:block;
    float:right;
    margin-top:-100%;
    height:100%
}
.artifacts-table{width:100%;border-collapse:collapse;min-width:800px}
.artifacts-table thead{background:rgba(0,0,0,0.3)}
.artifacts-table th{
    padding:16px 20px;
    font-family:var(--font-heading);
    font-size:13px;
    font-weight:500;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--color-text-muted);
    text-align:left;
    border-bottom:1px solid var(--color-border)
}
.th-tier{width:60px;text-align:center}
.th-image{width:80px;text-align:center}
.th-name{width:200px}
.th-properties{min-width:300px}
.th-price{width:140px;text-align:right}
.artifacts-table tbody tr{
    border-bottom:1px solid var(--color-border);
    transition:var(--transition)
}
.artifacts-table tbody tr:last-child{border-bottom:none}
.artifacts-table tbody tr:hover{background:rgba(255,255,255,0.02)}
.artifacts-table td{padding:16px 20px;vertical-align:middle}

.tier-cell{text-align:center}
.tier-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;height:32px;
    font-size:14px;
    font-weight:600;
    border-radius:8px;
    background:rgba(255,255,255,0.05)
}
.tier-badge--1{color:var(--color-tier-1);border:1px solid rgba(156,163,175,0.3)}
.tier-badge--2{color:var(--color-tier-2);background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3)}
.tier-badge--3{color:var(--color-tier-3);background:rgba(249,115,22,0.1);border:1px solid rgba(249,115,22,0.3)}
.tier-badge--unique{color:var(--color-tier-unique);background:rgba(168,85,247,0.1);border:1px solid rgba(168,85,247,0.3);font-size:11px}

.artifact-image-cell{text-align:center}
.artifact-image{
    width:56px;height:56px;
    object-fit:contain;
    border-radius:8px;
    background:rgba(0,0,0,0.3);
    padding:4px;
    transition:var(--transition)
}
.artifacts-table tbody tr:hover .artifact-image{transform:scale(1.1)}

.artifact-name{display:flex;flex-direction:column;gap:4px}
.artifact-name__ru{font-weight:500;color:var(--color-text);font-size:15px}
.artifact-name__en{font-size:12px;color:var(--color-text-muted);font-style:italic}

.properties-list{display:flex;flex-direction:column;gap:4px}
.property{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1.4}
.property--positive{color:var(--color-positive)}
.property--negative{color:var(--color-negative)}
.property__icon{width:14px;height:14px;flex-shrink:0}

.price-cell{text-align:right}
.price{font-weight:600;color:var(--color-accent);font-size:15px}
.price--none{color:var(--color-text-muted);font-weight:400;font-size:13px}

.artifacts-error{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:80px 20px;
    text-align:center
}
.artifacts-error__icon{
    width:48px;height:48px;
    color:var(--color-text-muted);
    margin-bottom:16px
}
.artifacts-error__text{
    font-size:18px;
    color:var(--color-text-muted);
    margin-bottom:24px
}
.artifacts-error__btn{
    color:var(--color-accent);
    background:none;
    border:1px solid var(--color-accent);
    padding:12px 28px;
    border-radius:10px;
    cursor:pointer;
    font-size:14px;
    font-family:var(--font-main);
    transition:var(--transition)
}
.artifacts-error__btn:hover{
    background:rgba(196,163,90,0.15)
}

@media(min-width:850px){
    .artifacts-table-wrapper::after{display:none}
}
@media(max-width:1024px){
    .categories-nav__list{justify-content:flex-start;overflow-x:auto;padding-bottom:10px;flex-wrap:nowrap}
    .category-btn{white-space:nowrap;flex-shrink:0}
}
@media(max-width:768px){
    .category-header{padding:16px 20px}
    .category-header__title{font-size:20px}
    .artifacts-table th,.artifacts-table td{padding:12px 16px}
    .artifact-image{width:48px;height:48px}
    .property{font-size:12px}
}
@media(max-width:480px){
    .categories-nav{padding:16px 0 24px}
    .category-btn{padding:10px 16px;font-size:13px}
    .artifacts-error{padding:60px 16px}
    .artifacts-error__text{font-size:16px}
}
@media(hover:none){
    .artifacts-table tbody tr:hover .artifact-image{transform:none}
}