/* ---------------- CARD ---------------- */
.info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
}

.info-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.info-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.info-content {
  text-align: center;
  background-color: #222;
  border-top: 1px solid #333;
  border-radius: 0 0 12px 12px;
  padding: 10px;
  width: 100%;
}

.info-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.info-fullname {
  font-size: 1rem;
  color: #eee;
}

.info-text {
  font-size: 1rem;
  color: #ddd;
  margin-top: 6px;
}

.info-text-story {
  font-size: 0.9rem;
  color: #ddddddde;
  margin-top: 6px;
}

/* ---------------- SKILL BOX ---------------- */
.skill-box {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 10px;
  color: #ddd;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skill-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.id-block-container .skill-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}


.skill-head img {
  width: 55px;
  height: 55px;
  border-radius: 4px;
  border: 1px solid #333;
}

.head-span {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.head-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
}

.head-cooldown {
  font-size: 0.9rem;
  color: #999;
}

.skill-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* TAG STYLES */
.title-tag {
  display: inline-block;
  margin-top: 3px;
}

.tag-name-red {
  background-color: #331111;
  color: #f88;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.tag-name-blue {
  background-color: #111933;
  color: #88bfff;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.tag-name-white {
  color: #fff;
}

/* SKILL TEXT */
.skill-text {
  background-color: #222;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.95rem;
  color: #ddd;
}

/* UPGRADE BOX */
.skill-up {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: #1f2f29;
  padding: 8px;
  border-radius: 8px;
}

.skill-up-tag {
  background-color: #395f4f;
  color: #cfffe6;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.skill-up .skill-text {
  background-color: #1a1a1a;
  border: 1px solid #394943;
}

/* STAR BOX */
.star-up {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: #241c2c;
  padding: 8px;
  border-radius: 8px;
}

.star-up-tag {
  background-color: #5a3c75;
  color: #e2d4f5;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.star-up .skill-text {
  background-color: #1a1a1a;
  border: 1px solid #4a3b5a;
}

.text {
  color: #ddd;
}

/* TOOLTIP COLOR */
text[style="SkillToolTip_Orange"] {
  color: #ffae42;
  font-weight: bold;
}
text[style="SkillToolTip_Purple"] {
  color: #b478f1;
  font-weight: bold;
}
text[style="SkillToolTip_Red"] {
  color: #f25c54;
  font-weight: bold;
}
text[style="SkillToolTip_Blue"] {
  color: #59bfff;
  font-weight: bold;
}
text[style="SkillToolTip_Green"] {
  color: #67d09e;
  font-weight: bold;
}
text[style="SkillToolTip_Yellow"] {
  color: #ffd966;
  font-weight: bold;
}



/* TOOLTIP COLOR (ใช้ span แทน text) */
span.SkillToolTip_Orange {
  color: #ffae42;
  font-weight: bold;
}
span.SkillToolTip_Purple {
  color: #b478f1;
  font-weight: bold;
}
span.SkillToolTip_Red {
  color: #f25c54;
  font-weight: bold;
}
span.SkillToolTip_Blue {
  color: #59bfff;
  font-weight: bold;
}
span.SkillToolTip_Green {
  color: #67d09e;
  font-weight: bold;
}

span.SkillToolTip_Yellow {
  color: #ffd966;
  font-weight: bold;
}

.ToolTip1_red {
  background-color: #331111;
  color: #f88;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.ToolTip1_blue {
  background-color: #111933;
  color: #88bfff;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.skill-links {
  display: flex;              /* ใช้ flex จัดเรียงปุ่มเป็นแถว */
  justify-content: center;    /* กึ่งกลางแนวนอน */
  gap: 10px;                  /* ช่องว่างระหว่างปุ่ม */
  margin: 0;             /* ระยะบน-ล่าง */
}

.skill-links button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
}

.skill-links button img {
  width: 55px;
  height: 55px;
  display: block;
  border-radius: 4px;
  border: 1px solid #333;
}

.fillter-box {
  /* background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 10px;
  color: #ddd; */
  display: flex;
  flex-direction: column;
}

.fillter-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;   /* จัดกลางแนวนอน */
}
.fillter-skill {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  justify-content: center;
  width: 100%;
  max-width: 800px;  /* จำกัดขนาด */
}




/* ===== Container หลัก ===== */
.itemsbuild-main {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* ให้ชุดไอเท็มห่อบรรทัดใหม่ */
  gap: 20px;
  padding: 10px;
}

/* ===== กล่องเก็บชุดไอเท็ม ===== */
.itemsbuild-box {
  display: flex;
  flex-direction: column; /* แนวตั้งบนมือถือ */
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* ===== media query สำหรับหน้าจอใหญ่ ===== */
@media (min-width: 580px) {
  .itemsbuild-box {
    flex-direction: row; /* เรียงแนวนอน */
    flex-wrap: wrap;     /* ถ้าเยอะให้ขึ้นบรรทัดใหม่ */
    justify-content: center;
    align-items: center;
  }
}

/* ===== กล่องแต่ละชุด ===== */
.stat-main {
  display: flex;
  flex-direction: column; /* default เป็น column บนมือถือ */
  justify-content: center;
  align-items: center;
  gap: 15px;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px;
  flex-wrap: nowrap; /* stats ลงบรรทัดใหม่ถ้าเล็ก */
  min-width: 350px;
}



/* ===== item-box grid 3x2 ===== */
.item-box {
  display: grid;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(2, 60px);
  gap: 4px;
  background-color: #222;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px;
  max-width: 220px;
  justify-content: center;
}

/* ===== ไอเท็มแต่ละประเภท ===== */
.item-box .equip,
.item-box .armor,
.item-box .accessories {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
}

/* ===== ไอเท็มแต่ละชิ้น ===== */
.item-box .equip div[item_cardset],
.item-box .armor div[item_cardset],
.item-box .accessories div[item_cardset] {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.item-img {
  margin: 2px;
}

/* ===== stats ===== */
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* ===== แต่ละบรรทัด stat ===== */
.stat-line, .stat-line-main {
  display: flex;
  justify-content: space-between; /* label ซ้าย value ขวา */
  align-items: center;
  font-size: 14px;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
}

/* ===== สี background ===== */
.stat-line {
  background-color: #222;
  border: 1px solid #333;
  font-size: 12px;
}

.stat-line-main {
  background-color: #58137fa3;
  border: 1px solid #333;
}

/* ===== label + value ===== */
.stat-line .label,
.stat-line-main .label {
  font-weight: 500;
}

.stat-line .value,
.stat-line-main .value {
  font-weight: 600;
  margin-left: 20px;
}