body {
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
    color: #f5f5f5;
    margin: 0;
    padding: 20px;
}

/* Div alapstílusok (extra kódod beépítve) */
div {
    --chat2-full-inner-spacing: 0px;
    --mm-ocd-width: 80%;
    --mm-ocd-min-width: 200px;
    --mm-ocd-max-width: 440px;
    --mm-spn-item-height: 50px;
    --mm-spn-item-indent: 20px;
    --mm-spn-line-height: 24px;
    --mm-spn-panel-offset: 30%;
    font: 13px/1.231 arial, helvetica, clean, sans-serif;
    text-size-adjust: 100%;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Open Sans', HelveticaNeue, sans-serif;
    color: rgb(214,214,214);
    word-wrap: break-word;
    line-height: 1.28;
    --text-color: unset !important;
    --date-picker-foreground: #f7f7f7;
    --date-picker-background: #303030;
    --date-picker-highlight-border: #228e5d;
    --date-picker-selected-background: #303030;
    --date-input-width: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    margin-bottom: 45px;
}

/* 3 oszlopos elrendezés a fegyverekhez */
.body {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 oszlop fixen */
    gap: 15px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Egyedi fegyver kártyák */
.item {
    background-color: #292929;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100% !important; /* Biztosítja, hogy minden oszlopban legyen */
    display: block !important;
}

.item:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
}

.item img {
    max-width: 100%;
    height: auto;
    display: block;
}

.bottomContainer {
    padding: 10px;
    font-weight: bold;
    background-color: #1f1f1f;
    border-top: 1px solid #444;
}

/* Reszponzív elrendezés kisebb kijelzőkre */
@media (max-width: 900px) {
    .body {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 oszlop kis képernyőn */
    }
}

@media (max-width: 600px) {
    .body {
        grid-template-columns: repeat(1, 1fr) !important; /* 1 oszlop mobilon */
    }
}

.body {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 oszlop */
    gap: 15px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    align-items: stretch; /* Minden elem egyforma magasságú lesz */
}

.item {
    background-color: #292929;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100% !important;
    display: flex !important; /* Biztosítja a flexbox layoutot */
    flex-direction: column; /* A tartalom oszlopba rendezése */
    justify-content: space-between; /* A tartalom kitöltése */
    height: 250px; /* Fix magasság, hogy minden egyforma legyen */
}

.item:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
}

/* Kép méretének egységesítése */
.item img {
    max-width: 100%;
    max-height: 150px; /* Nem lesz nagyobb 150px-nél */
    width: auto;
    height: auto;
    display: block;
    margin: auto; /* Középre igazítás */
}

/* Név pozicionálása az aljára */
.bottomContainer {
    padding: 10px;
    font-weight: bold;
    background-color: #1f1f1f;
    border-top: 1px solid #444;
    text-align: center;
    flex-grow: 1; /* Kitölti a maradék helyet */
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .body {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .item {
        height: 200px; /* Kisebb magasság */
    }
}

@media (max-width: 600px) {
    .body {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .item {
        height: 180px; /* Még kisebb mobilon */
    }
}

.rank--3{
      --chat2-full-inner-spacing: 0px;
    --mm-ocd-width: 80%;
    --mm-ocd-min-width: 200px;
    --mm-ocd-max-width: 440px;
    --mm-spn-item-height: 50px;
    --mm-spn-item-indent: 20px;
    --mm-spn-line-height: 24px;
    --mm-spn-panel-offset: 30%;
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
    text-size-adjust: 100%;
    font-size: 13px;
    font-family: -apple-system,BlinkMacSystemFont,'Open Sans',HelveticaNeue,sans-serif;
    color: rgb(214,214,214);
    word-wrap: break-word;
    line-height: 1.28;
    --text-color: unset !important;
    --date-picker-foreground: #f7f7f7;
    --date-picker-background: #303030;
    --date-picker-highlight-border: #228e5d;
    --date-picker-selected-background: #303030;
    --date-input-width: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    list-style: none;
    display: inline-block;
    position: relative;
    margin: 0
0 25px;
    margin-bottom: 45px;
    width: 250px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    background: #f5955b33;
}

.rank--2{
      --chat2-full-inner-spacing: 0px;
    --mm-ocd-width: 80%;
    --mm-ocd-min-width: 200px;
    --mm-ocd-max-width: 440px;
    --mm-spn-item-height: 50px;
    --mm-spn-item-indent: 20px;
    --mm-spn-line-height: 24px;
    --mm-spn-panel-offset: 30%;
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
    text-size-adjust: 100%;
    font-size: 13px;
    font-family: -apple-system,BlinkMacSystemFont,'Open Sans',HelveticaNeue,sans-serif;
    color: rgb(214,214,214);
    word-wrap: break-word;
    line-height: 1.28;
    --text-color: unset !important;
    --date-picker-foreground: #f7f7f7;
    --date-picker-background: #303030;
    --date-picker-highlight-border: #228e5d;
    --date-picker-selected-background: #303030;
    --date-input-width: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    list-style: none;
    display: inline-block;
    position: relative;
    margin: 0
0 25px;
    margin-bottom: 45px;
    width: 250px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    background: #d1548d33;
}

.rank--1{
      --chat2-full-inner-spacing: 0px;
    --mm-ocd-width: 80%;
    --mm-ocd-min-width: 200px;
    --mm-ocd-max-width: 440px;
    --mm-spn-item-height: 50px;
    --mm-spn-item-indent: 20px;
    --mm-spn-line-height: 24px;
    --mm-spn-panel-offset: 30%;
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
    text-size-adjust: 100%;
    font-size: 13px;
    font-family: -apple-system,BlinkMacSystemFont,'Open Sans',HelveticaNeue,sans-serif;
    color: rgb(214,214,214);
    word-wrap: break-word;
    line-height: 1.28;
    --text-color: unset !important;
    --date-picker-foreground: #f7f7f7;
    --date-picker-background: #303030;
    --date-picker-highlight-border: #228e5d;
    --date-picker-selected-background: #303030;
    --date-input-width: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    list-style: none;
    display: inline-block;
    position: relative;
    margin: 0
0 25px;
    margin-bottom: 45px;
    width: 250px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    background: #00958733;
}

.rank--0{
        --chat2-full-inner-spacing: 0px;
    --mm-ocd-width: 80%;
    --mm-ocd-min-width: 200px;
    --mm-ocd-max-width: 440px;
    --mm-spn-item-height: 50px;
    --mm-spn-item-indent: 20px;
    --mm-spn-line-height: 24px;
    --mm-spn-panel-offset: 30%;
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
    text-size-adjust: 100%;
    font-size: 13px;
    font-family: -apple-system,BlinkMacSystemFont,'Open Sans',HelveticaNeue,sans-serif;
    color: rgb(214,214,214);
    word-wrap: break-word;
    line-height: 1.28;
    --text-color: unset !important;
    --date-picker-foreground: #f7f7f7;
    --date-picker-background: #303030;
    --date-picker-highlight-border: #228e5d;
    --date-picker-selected-background: #303030;
    --date-input-width: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    list-style: none;
    display: inline-block;
    position: relative;
    margin: 0
0 25px;
    margin-bottom: 45px;
    width: 250px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
}

.rank--4{
      --chat2-full-inner-spacing: 0px;
    --mm-ocd-width: 80%;
    --mm-ocd-min-width: 200px;
    --mm-ocd-max-width: 440px;
    --mm-spn-item-height: 50px;
    --mm-spn-item-indent: 20px;
    --mm-spn-line-height: 24px;
    --mm-spn-panel-offset: 30%;
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
    text-size-adjust: 100%;
    font-size: 13px;
    font-family: -apple-system,BlinkMacSystemFont,'Open Sans',HelveticaNeue,sans-serif;
    color: rgb(214,214,214);
    word-wrap: break-word;
    line-height: 1.28;
    --text-color: unset !important;
    --date-picker-foreground: #f7f7f7;
    --date-picker-background: #303030;
    --date-picker-highlight-border: #228e5d;
    --date-picker-selected-background: #303030;
    --date-input-width: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    list-style: none;
    display: inline-block;
    position: relative;
    margin: 0
0 25px;
    margin-bottom: 45px;
    width: 250px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    background: #fad66333;
}

.superrare {
  background: #FEC544;
}

.legendary {
  background: #B36C1A;
}

.epic {
  background: #7A40B1;
}

.rare {
  background: #3371B4;
}

.uncommon {
  background: #0D8D42;
}

.common {
  background: #696969;
}