.chest-system {
    max-width: 1000px;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
}
 
.chest-grid { display: flex; flex-direction: column; gap: 22px; }
 
.chest-card {
    background: #15110d;
    border: 1px solid rgba(201, 162, 39, 0.16);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
 
@media (min-width: 800px) {
    .chest-card { flex-direction: row; }
}
 
.chest-info {
    padding: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    text-align: center;
    background: #1b1611;
    border-right: 1px solid rgba(201, 162, 39, 0.16);
    border-top: 4px solid var(--chest-color, #ab8226);
}
 
.chest-info img { width: 60px; height: 60px; margin-bottom: 16px; filter: drop-shadow(0 0 10px rgba(0,0,0,0.6)); }
 
.chest-info h3 {
    margin: 0;
    font-family: "Cinzel", serif;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--chest-color, #e0b84a);
}
 
.items-list-container { flex-grow: 1; padding: 22px; background: #0b0908; }
 
.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
 
.item-entry {
    background: #1b1611;
    padding: 12px 14px;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-left: 3px solid #444;
    transition: background 0.2s ease, transform 0.15s ease;
}
.item-entry:hover { background: #221c15; transform: translateY(-1px); }
 
.item-name { color: #ece4d3; font-size: 0.85rem; font-weight: 500; }
.item-chance { font-size: 0.78rem; font-weight: 700; padding: 3px 8px; border-radius: 3px; background: #0b0908; white-space: nowrap; }
 
/* Kolory rzadkości (rarity) celowo NIE zostały przełożone na złoto/emerald/ember -
   fiolet/niebieski/zielony to szeroko rozpoznawalna konwencja jakości przedmiotów
   z gatunku MMORPG (Tibia/WoW-like), więc gracze rozpoznają ją intuicyjnie */
.rarity-rare { border-left-color: #a335ee !important; }
.rarity-rare .item-chance { color: #a335ee; }
 
.rarity-uncommon { border-left-color: #0070dd !important; }
.rarity-uncommon .item-chance { color: #0070dd; }
 
.rarity-common { border-left-color: #1eff00 !important; }
.rarity-common .item-chance { color: #1eff00; }
 
.header-desc { text-align: center; margin-bottom: 30px; }
.header-desc h2 { font-family: "Cinzel", serif; font-size: 1.7rem; color: #ece4d3; font-weight: 600; margin: 0 0 8px; }
.header-desc p { color: #948c7a; font-size: 0.95rem; margin: 0; }