/* =========================================================
   mu-guides-skin.css
   Purpose: make MU Guides (CSS #2) look like your main style (CSS #1)
   Scope: ONLY inside .mu-guides-container
   ========================================================= */

/* 0) Fix: base look inside guides */
.mu-guides-container{
  font-family: 'DINNextW1G', 'Mulish', sans-serif;
  color: #898791;
}

/* 1) Links */
.mu-guides-container a{
  transition: all 0.3s ease;
  color: #e6e3f4;
  text-decoration: none;
}
.mu-guides-container a:hover{
  color: #fbd181;
}

/* 2) Titles */
.mu-guides-container h1,
.mu-guides-container h2,
.mu-guides-container h3,
.mu-guides-container h4{
  color: #fbd181;
  margin-bottom: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  font-family: 'albertus', 'Mulish', sans-serif;
}

/* 3) Panels / blocks (bring your “dark card” look) */
.mu-guides-container .mu-guides-events-container,
.mu-guides-container .mu-guides-items-page-container,
.mu-guides-container .mu-guides-item-tiers-page,
.mu-guides-container .mu-guides-golden-invasions-page,
.mu-guides-container .mu-guides-regular-invasions-page,
.mu-guides-container .mu-guides-chaos-page,
.mu-guides-container .mu-guides-settings-page,
.mu-guides-container .mu-guides-drops-page,
.mu-guides-container .mu-guides-skills-page,
.mu-guides-container .mu-guides-info-quest-container{
  background: rgba(18, 20, 30, .65) !important;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

/* 4) Sub-cards */
.mu-guides-container .mu-guides-events-sub-container,
.mu-guides-container .mu-guides-golden-invasion-sub-container,
.mu-guides-container .mu-guides-regular-invasion-sub-container,
.mu-guides-container .mu-guides-settings-sub-container,
.mu-guides-container .mu-guides-drops-box,
.mu-guides-container .mu-guides-chaos-card,
.mu-guides-container .mu-guides-ancient-set-box,
.mu-guides-container .mu-guides-lvl380-set-container,
.mu-guides-container .mu-guides-socket-set-container,
.mu-guides-container .mu-guides-socket-wep-container,
.mu-guides-container .mu-guides-lvl380-wep-container{
  background: rgba(18, 20, 30, .55) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.40);
}

/* 5) Buttons: use your “gold border” button style */
.mu-guides-container button,
.mu-guides-container .button,
.mu-guides-container a.button{
  transition: all 0.3s ease;
  cursor: pointer;
  background: none;
  color: #fbd181;
  border: 2px solid #fbd181;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  text-transform: uppercase;
  padding: 12px 14px;
}
.mu-guides-container button:hover,
.mu-guides-container .button:hover,
.mu-guides-container a.button:hover{
  background: rgba(251, 209, 129, 0.3);
  color: #fff;
}

/* 6) Inputs/selects */
.mu-guides-container input,
.mu-guides-container textarea{
  background: rgba(29, 29, 40, 0.7);
  border: 1px solid rgba(29, 29, 40, 0.7);
  color: #7d7c92;
  font-size: 14px;
  width: 100%;
  font-family: 'DINNextW1G', 'Mulish', sans-serif;
  padding: 12px 14px;
  border-radius: 6px;
}

.mu-guides-container select{
  background: #1d1d28;
  border: 1px solid #1d1d28;
  color: #7d7c92;
  padding: 12px 40px 12px 16px;
  border-radius: 6px;
}

/* 7) Tables: make them like in CSS #1 */
.mu-guides-container table{
  width: 100%;
  margin-bottom: 15px;
  border-collapse: collapse;
  border-spacing: 0;
}
.mu-guides-container table td,
.mu-guides-container table th{
  padding: 10px;
  border: 1px solid rgba(86, 84, 96, 0.4);
  color: rgba(230, 227, 244, .80);
}
.mu-guides-container table thead th{
  color: #fbd181;
  border-bottom: 2px solid rgba(251, 209, 129, .6);
  background: rgba(255,255,255,.03);
}

/* 8) Navigation: keep structure from CSS #2 but recolor to your palette */
.mu-guides-container .mu-guides-navigation{
  background-color: rgba(28, 27, 47, 0.70) !important;
  border-bottom: 1px solid rgba(251, 209, 129, .35) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.mu-guides-container .mu-guides-navigation li{
  border-color: rgba(142, 148, 163, 0.35) !important;
}
.mu-guides-container .mu-guides-navigation ul li a{
  color: #e6e3f4 !important;
}
.mu-guides-container .mu-guides-navigation ul li a:hover{
  color: #fbd181 !important;
  filter: none !important; /* убираем красный drop-shadow */
}
.mu-guides-container .mu-guides-nav-title{
  color: #fbd181 !important;
}

/* Optional: dropdown bg to match */
.mu-guides-container .mu-guides-dropdown{
  background-color: rgba(28, 27, 47, 0.95) !important;
  border: 1px solid rgba(255,255,255,.08);
}

/* =========================================================
   FIX: MU Guides cards must expand by content
   Paste at the END of mu-guides-skin.css
   ========================================================= */

/* Все “карточки/боксы”, где у тебя раньше были height: XXXpx */
.mu-guides-container .mu-guides-general-sub-container,
.mu-guides-container .mu-guides-events-sub-container{
  min-height: 320px;
}
.mu-guides-container .mu-guides-golden-invasion-sub-container,
.mu-guides-container .mu-guides-regular-invasion-sub-container,
.mu-guides-container .mu-guides-settings-sub-container,
.mu-guides-container .mu-guides-drops-box,
.mu-guides-container .mu-guides-chaos-card,
.mu-guides-container .mu-guides-ancient-set-box,
.mu-guides-container .zyro-quest-info,
.mu-guides-container .stages-container,
.mu-guides-container .party-search-container,
.mu-guides-container .custom-interface-container,
.mu-guides-container .alt-hover-container,
.mu-guides-container .general-settings-info,
.mu-guides-container .party-settings-container,
.mu-guides-container .party-com-and-rec-container,
.mu-guides-container .other-commands-container{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important; /* чтобы не резало контент */
}

/* =========================================================
   FIX: media should not overflow cards (override inline sizes)
   ========================================================= */

.mu-guides-container img,
.mu-guides-container video,
.mu-guides-container iframe{
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

.mu-guides-navigation img{
  max-width: none !important;
  height: 45px !important;
  width: auto !important;
  display: inline-block;
}

/* =========================================================
   FIX: tables are scrollable instead of breaking layout
   ========================================================= */

.mu-guides-container table{
  width: 60%;
  border-collapse: collapse;
}

/* если таблица шире контейнера — горизонтальный скролл вместо вылазания */
.mu-guides-container .mu-table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* безопасно: длинные строки в ячейках не ломают ширину */
.mu-guides-container td,
.mu-guides-container th{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mu-guides-container .mu-guides-guides-container{
  width: min(1150px, 100%);
}

/* Make class pages use full available width */
.mu-class-page .mu-guides-settings-sub-container-content.mu-class-content{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 12px; /* чтобы не липло к краю */
}

/* If some parent container limits width — remove the cap for this section */
.mu-class-page .mu-guides-settings-sub-container{
  width: 100%;
  max-width: none;
}

/* Generic grid for cards (equipment/weapons/wings) */
.mu-class-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* Card itself */
.mu-class-card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 12px;
  box-sizing: border-box;
  width: 100% !important; /* важно: не фиксируй 340px */
}

/* Images inside cards */
.mu-class-card img{
  width: 100%;
  height: 220px;
  object-fit: contain;
  display: block;
}

/* ===== Clear section separation ===== */

/* общий вертикальный ритм */
.mu-class-page .mu-guides-party-settings{
  margin: 16px 0;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14));
  box-shadow: 0 12px 26px rgba(0,0,0,.30);
}

/* сильнее отделяем блоки друг от друга */
.mu-class-page .mu-guides-party-settings + .mu-guides-party-settings{
  margin-top: 22px;
}

/* Заголовок раздела (Characteristics / HP / Mana / Evolutions / Equipment...) */
.mu-class-page .mu-guides-party-settings-title{
  display: flex;
  align-items: center;
  gap: 10px;

  margin: -14px -14px 12px;      /* делает “шапку” на всю ширину карточки */
  padding: 12px 14px;

  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}

/* Текст заголовка больше + заметнее */
.mu-class-page .mu-guides-party-settings-title > span{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  color: rgba(255,255,255,.92);
  text-transform: none;
}

/* Золотой “маркер” слева — сразу видно где начинается секция */
.mu-class-page .mu-guides-party-settings-title::before{
  content: "";
  width: 8px;
  height: 18px;
  border-radius: 99px;
  background: #ffdd06;
  box-shadow: 0 0 0 3px rgba(255,221,6,.12);
}

/* списки внутри секций — аккуратнее */
.mu-class-page .mu-guides-party-settings ul{
  margin: 8px 0 0;
}

/* таблицы — читаемее */
.mu-class-page .mu-guides-party-settings table{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.mu-class-page .mu-guides-party-settings thead th{
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.70);
}
.mu-class-page .mu-guides-party-settings tbody tr:nth-child(odd){
  background: rgba(0,0,0,.10);
}

/* Центруем карточки внутри секций (Equipment/Weapons/Wings/Skills и т.д.) */
.mu-class-page .mu-guides-party-settings > div[style*="display:flex"]{
  justify-content: center !important;
}

/* Чтобы блок не растягивался на всю ширину монитора и выглядел аккуратно */
.mu-class-page .mu-guides-party-settings{
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* === Spacing fix for wiki pages (more air, no "stacking" feel) === */
.mu-guides-container .mu-guides-settings-sub-container-content{
  padding: 18px 18px 22px;

}

/* Typography rhythm */
.mu-guides-container .mu-guides-settings-sub-container-content p{
  margin: 10px 0 14px;
  line-height: 1.55;
}
.mu-guides-container .mu-guides-settings-sub-container-content ul{
  margin: 8px 0 16px 20px;
}
.mu-guides-container .mu-guides-settings-sub-container-content li{
  margin: 6px 0;
  line-height: 1.5;
}

/* Headings spacing */
.mu-guides-container .mu-guides-settings-sub-container-content h1{
  margin: 0 0 12px;
}
.mu-guides-container .mu-guides-settings-sub-container-content h2{
  margin: 18px 0 10px;
}
.mu-guides-container .mu-guides-settings-sub-container-content h3{
  margin: 14px 0 8px;
}
.mu-guides-container .mu-guides-settings-sub-container-content h4{
  margin: 12px 0 8px;
}

/* HR spacing */
.mu-guides-container .mu-guides-settings-sub-container-content hr{
  border: 0;
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 18px 0;
}

/* Tables: more readable */
.mu-guides-container .mu-guides-settings-sub-container-content table{
  margin: 12px 0 18px;
}
.mu-guides-container .mu-guides-settings-sub-container-content td,
.mu-guides-container .mu-guides-settings-sub-container-content th{
  padding: 10px 12px;
  line-height: 1.35;
}

/* Code blocks spacing */
.mu-guides-container .mu-guides-settings-sub-container-content pre{
  margin: 10px 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  overflow: auto;
}
/* === Reset & Rebit highlights (wiki) === */
.mu-note{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  padding:12px 14px;
  border-radius:10px;
  margin:12px 0;
  line-height:1.45;
}
.mu-note strong{font-weight:700;}
.mu-note--info{border-color:rgba(70,160,255,.35);background:rgba(70,160,255,.10);}
.mu-note--warn{border-color:rgba(255,170,0,.35);background:rgba(255,170,0,.10);}
.mu-note--ok{border-color:rgba(60,200,120,.35);background:rgba(60,200,120,.10);}

.mu-badge{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
  vertical-align:middle;
  margin-right:8px;
}
.mu-badge--info{border-color:rgba(70,160,255,.5);color:#9fd0ff;}
.mu-badge--warn{border-color:rgba(255,170,0,.55);color:#ffd18a;}
.mu-badge--ok{border-color:rgba(60,200,120,.55);color:#9ff0c4;}

.mu-hl{font-weight:700;}
.mu-hl--blue{color:#9fd0ff;}
.mu-hl--gold{color:#ffd18a;}
.mu-hl--red{color:#ff9a9a;}

/* VIP tier labels */
.mu-tier{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
  font-weight:700;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}
.mu-tier--nonvip{color:#d7d7d7;}
.mu-tier--vip{color:#9fd0ff; border-color:rgba(70,160,255,.45);}
.mu-tier--elite{color:#ffd18a; border-color:rgba(255,170,0,.55);}

/* --- Wiki tables: stop per-letter wrapping on mobile --- */
#wikiContent .mu-table-scroll{
  width: 50%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#wikiContent .mu-table-scroll table{
  width: 70%;
  min-width: 720px;          /* подберите: 640/720/900 чтобы колонки не схлопывались */
  border-collapse: collapse;
}

/* prevent vertical “letter stacking” */
#wikiContent .mu-table-scroll th,
#wikiContent .mu-table-scroll td{
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: nowrap;        /* заголовки и числа в одну строку */
  writing-mode: horizontal-tb !important;
  transform: none !important;
}

/* optional: allow long NOTES column to wrap normally */
#wikiContent .mu-table-scroll td.notes,
#wikiContent .mu-table-scroll th.notes{
  white-space: normal;
  overflow-wrap: anywhere;    /* только для заметок, если там длинный текст */
}