:root{
  /* Guides theme tokens (inherits site palette) */
  --g-panel: rgba(0,0,0,.38);
  --g-panel-2: rgba(0,0,0,.26);
  --g-border: rgba(191,163,126,.22);
  --g-border-2: rgba(191,163,126,.34);
  --g-text-soft: rgba(245,245,245,.78);
  --g-glow: rgba(111,168,255,.35);
  --g-shadow: 0 14px 36px rgba(0,0,0,.42);
  --g-radius: 18px;
  --g-radius-sm: 14px;
}

/* Active link in the global nav */
nav a.is-active{
  background: rgba(191,163,126,.25);
  color: var(--light-colour);
}

/* ===== HERO ===== */
.guides-hero{
  position: relative;
  width: min(1760px, calc(100% - 36px));
  margin: 18px auto 18px;
}

.guides-hero__bg{
  position:absolute;
  inset: 0;
  border-radius: var(--g-radius);
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(35,95,190,.38), transparent 60%),
    radial-gradient(900px 260px at 88% 32%, rgba(191,163,126,.22), transparent 62%),
    linear-gradient(145deg, rgba(0,0,0,.58), rgba(0,0,0,.18));
  border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow);
  overflow:hidden;
}

.guides-hero__bg::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 240px at 50% 115%, rgba(4,14,41,.92), rgba(4,14,41,0));
  pointer-events:none;
}

.guides-hero__content{
  position:relative;
  padding: 26px 22px;
}

.guides-hero h1{
  margin:0;
  font-family:'Cinzel', serif;
  letter-spacing:.6px;
  color: var(--light-colour);
  text-shadow: 0 0 22px rgba(111,168,255,.16);
  font-size: clamp(26px, 2.1vw, 34px);
}

.guides-hero p{
  margin:8px 0 0;
  color: var(--g-text-soft);
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.55;
}

.guides-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 16px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--g-border);
  color: var(--light-colour);
  font-family:'Cinzel', serif;
  font-size: 13px;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.chip:hover{ transform: translateY(-1px); border-color: var(--g-border-2); background: rgba(0,0,0,.38); }
.chip:focus-visible{ outline: 2px solid rgba(111,168,255,.45); outline-offset: 2px; }
.chip img{ width:18px; height:18px; object-fit:contain; opacity:.95; }

/* ===== LAYOUT SHELL ===== */
.guides-wrap{
  width: min(1760px, calc(100% - 36px));
  margin: 0 auto;
  padding: 0 0 46px;
}

.guides-shell{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
}

/* ===== SIDEBAR ===== */
.guides-sidebar{
  position: sticky;
  top: 10px; /* menu is not fixed; keep near top */
  align-self: start;
  border-radius: var(--g-radius);
  /* More opaque panel to avoid banner bleed-through behind the sidebar */
  background:
    radial-gradient(620px 220px at 30% 0%, rgba(35,95,190,.18), transparent 62%),
    radial-gradient(520px 240px at 80% 35%, rgba(191,163,126,.12), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.76), rgba(0,0,0,.56));
  border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  /* More vertical room for future categories */
  max-height: calc(100vh - 18px);
  backdrop-filter: blur(8px);
  isolation: isolate;
}

.guides-sidebar__top{
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(191,163,126,.14);
}

.guides-title{
  font-family:'Cinzel', serif;
  font-size: 19px;
  color: var(--light-colour);
}

.guides-search{
  display:flex;
  gap: 8px;
  margin-top: 12px;
}

.guides-search input{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(191,163,126,.18);
  background: rgba(0,0,0,.30);
  color: var(--light-colour);
  outline: none;
}

.guides-search input:focus{
  border-color: rgba(111,168,255,.40);
  box-shadow: 0 0 0 2px rgba(111,168,255,.12);
}

.g-btn{
  border-radius: 12px;
  border: 1px solid rgba(191,163,126,.18);
  background: rgba(0,0,0,.30);
  color: var(--light-colour);
  cursor:pointer;
  padding: 0 12px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.g-btn:hover{ background: rgba(0,0,0,.40); border-color: rgba(191,163,126,.28); }
.g-btn:active{ transform: translateY(1px); }
.g-btn--ghost{ width: 44px; font-size: 18px; line-height: 1; }

.guides-tabs{
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex: 1 1 auto;
  overflow:auto;
  overscroll-behavior: contain;
  /* ensure last item isn't hidden behind the bottom ad */
  padding-bottom: 12px;
  scroll-padding-bottom: 140px;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.14));
  scrollbar-width: thin;
  scrollbar-color: rgba(191,163,126,.28) rgba(0,0,0,.18);
}
.guides-tabs::-webkit-scrollbar{ width: 10px; }
.guides-tabs::-webkit-scrollbar-thumb{ background: rgba(191,163,126,.22); border-radius: 999px; border: 2px solid rgba(0,0,0,.18); }

.tab{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: var(--g-radius-sm);
  border: 1px solid rgba(191,163,126,.16);
  background: rgba(0,0,0,.18);
  cursor:pointer;
  text-align:left;
  min-height: 64px;
  width: 100%;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.tab:hover{ transform: translateY(-1px); border-color: rgba(191,163,126,.28); background: rgba(0,0,0,.28); }
.tab:focus-visible{ outline: 2px solid rgba(111,168,255,.45); outline-offset: 2px; }
.tab.is-active{
  border-color: rgba(111,168,255,.40);
  background: rgba(0,0,0,.30);
  box-shadow: 0 0 0 2px rgba(111,168,255,.12) inset;
}
.tab img{ width: 24px; height: 24px; object-fit:contain; }
.tab .tab__meta{ display:flex; flex-direction:column; min-width:0; }
.tab .tab__title{
  font-family:'Cinzel', serif;
  color: var(--light-colour);
  font-size: 14px;
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab .tab__desc{
  font-size: 12px;
  color: rgba(245,245,245,.70);
  margin-top: 3px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== NATIVE ADS ===== */
.guides-sidebar__ad{
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid rgba(191,163,126,.14);
  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.22));
  backdrop-filter: blur(6px);
}


.native-ad{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(191,163,126,.18);
  background: rgba(0,0,0,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.native-ad__label{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: .16em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(191,163,126,.22);
  background: rgba(0,0,0,.38);
  color: rgba(245,245,245,.78);
  backdrop-filter: blur(6px);
}

.native-ad__media,
.native-ad__fallback{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.native-ad--sidebar .native-ad__media,
.native-ad--sidebar .native-ad__fallback{
  aspect-ratio: 16 / 9;
}


.kbd{
  display:inline-block;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid rgba(191,163,126,.20);
  background: rgba(0,0,0,.22);
  color: rgba(245,245,245,.86);
  font-family:'Cinzel', serif;
  font-size: 11px;
}

/* ===== CONTENT ===== */
.guides-content{
  border-radius: var(--g-radius);
  background: var(--g-panel);
  border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow);
  overflow:hidden;
}

.g-section{ padding: 18px 18px 22px; }
.g-section + .g-section{ border-top: 1px solid rgba(191,163,126,.14); }
.g-h2{ margin:0; font-family:'Cinzel', serif; color: var(--light-colour); font-size: 22px; letter-spacing: .2px; }
.g-sub{ margin: 7px 0 0; color: rgba(245,245,245,.74); max-width: 92ch; line-height: 1.55; }

/* ===== CATEGORY HEADER (mini-banner + breadcrumb) ===== */
.cat-header{
  position: relative;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(191,163,126,.14);
  overflow:hidden;
}
.cat-header__bg{
  position:absolute;
  inset:0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(1.05) contrast(1.05);
  opacity:.32;
  transform: scale(1.02);
}
.cat-header__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(35,95,190,.42), transparent 62%),
    radial-gradient(900px 260px at 92% 20%, rgba(191,163,126,.22), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.36));
}
.cat-header__content{ position:relative; }
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  color: rgba(245,245,245,.68);
  font-size: 12px;
}
.breadcrumb .crumb{ color: rgba(245,245,245,.74); text-decoration:none; }
.breadcrumb .crumb:hover{ color: var(--light-colour); }
.breadcrumb .sep{ opacity:.65; }
.breadcrumb .is-current{ color: rgba(245,245,245,.90); }
.cat-header__titleRow{ display:flex; gap:12px; align-items:center; margin-top: 10px; }
.cat-header__icon{ width: 34px; height: 34px; object-fit: contain; opacity:.95; }
.cat-header__title{ margin:0; font-family:'Cinzel', serif; color: var(--light-colour); font-size: 24px; letter-spacing:.2px; }
.cat-header__desc{ margin: 4px 0 0; color: rgba(245,245,245,.74); max-width: 90ch; line-height: 1.45; }

/* ===== QUICK ANCHORS ===== */
.g-anchors{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(191,163,126,.14);
}
.anchor{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(191,163,126,.18);
  background: rgba(0,0,0,.22);
  color: rgba(245,245,245,.86);
  font-family:'Cinzel', serif;
  font-size: 12px;
  text-decoration:none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.anchor:hover{ transform: translateY(-1px); border-color: rgba(191,163,126,.28); background: rgba(0,0,0,.30); }
.anchor:focus-visible{ outline: 2px solid rgba(111,168,255,.45); outline-offset: 2px; }

.g-h3{ margin: 0 0 10px; font-family:'Cinzel', serif; color: var(--light-colour); font-size: 18px; letter-spacing:.2px; }
.table-block + .table-block{ margin-top: 18px; }

/* table cell with icon */
.cell{ display:inline-flex; align-items:center; gap: 8px; }
.cell img{ width: 18px; height: 18px; object-fit: contain; opacity:.95; }
.cell img.thumb{ width: 22px; height: 22px; object-fit: cover; border-radius: 6px; }

/* relic craft table helpers */
.cell-group{ display:flex; flex-wrap:wrap; gap: 8px; align-items:center; }
.cell-mini{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(191,163,126,.14);
  background: rgba(0,0,0,.18);
}
.cell-mini img{ width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.cell-mini span{ font-size: 12px; color: rgba(245,245,245,.78); letter-spacing: .1px; }

.g-btn--mini{
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 12px;
}
.table-block--wide{ overflow-x:auto; }
.g-table--reliquias th:last-child,
.g-table--reliquias td:last-child{ width: 120px; text-align:right; }


/* ===== RECIPE BLOCKS (craft layout) ===== */
.recipes{ display:flex; flex-direction:column; gap: 14px; margin-top: 14px; }
.recipe{
  border-radius: 16px;
  border: 1px solid rgba(191,163,126,.18);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.recipe__top{ padding: 14px 14px 10px; border-bottom: 1px solid rgba(191,163,126,.14); }
.recipe__title{ margin:0; font-family:'Cinzel', serif; color: var(--light-colour); font-size: 18px; }
.recipe__sub{ margin: 6px 0 0; color: rgba(245,245,245,.74); line-height: 1.45; }
.recipe__grid{ display:grid; grid-template-columns: 1fr 64px 300px; gap: 12px; padding: 14px; align-items:center; }
.recipe__inputs{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.recipe__arrow{ display:flex; align-items:center; justify-content:center; opacity:.95; }
.recipe__arrow img{ width: 34px; height: 34px; }
.slot{
  display:flex;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(191,163,126,.16);
  background: rgba(0,0,0,.22);
}
.slot__icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(191,163,126,.14);
}
.slot__icon img{ width: 26px; height: 26px; object-fit: contain; }
.slot__icon img.thumb{ width: 40px; height: 40px; object-fit: cover; border-radius: 10px; }
.slot__meta{ min-width:0; }
.slot__name{ font-family:'Cinzel', serif; color: rgba(245,245,245,.92); font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot__qty{ margin-top: 2px; color: rgba(245,245,245,.70); font-size: 12px; }
.slot--output{ border-color: rgba(111,168,255,.28); box-shadow: 0 0 0 2px rgba(111,168,255,.10) inset; }

@media (max-width: 1100px){
  .recipe__grid{ grid-template-columns: 1fr; }
  .recipe__arrow{ display:none; }
  .recipe__inputs{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* ===== SLIDER (1080x720) ===== */
.slider{
  margin-top: 16px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(191,163,126,.18);
  background: rgba(0,0,0,.22);
}
.slider__stage{ position:relative; }
.slide{
  display:none;
  aspect-ratio: 3 / 2; /* 1080x720 */
  width:100%;
  position:relative;
}
.slide.is-active{ display:block; }
.slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.slide__fade{
  position:absolute;
  inset:0;
  background: linear-gradient(0deg, rgba(4,14,41,.92), rgba(4,14,41,0) 58%);
  pointer-events:none;
}
.slide__cap{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
}
.slide__title{ font-family:'Cinzel', serif; color: var(--light-colour); font-size: 17px; margin:0; }
.slide__desc{ margin: 5px 0 0; color: rgba(245,245,245,.76); font-size: 13px; }

.slider__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px;
  background: rgba(0,0,0,.22);
  border-top: 1px solid rgba(191,163,126,.14);
}

.slider__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 46px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(191,163,126,.18);
  background: rgba(0,0,0,.28);
  color: var(--light-colour);
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.slider__btn:hover{ background: rgba(0,0,0,.40); border-color: rgba(191,163,126,.28); }
.slider__btn:active{ transform: translateY(1px); }

.dots{ display:flex; gap: 10px; align-items:center; justify-content:center; flex: 1; }
.dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(245,245,245,.24); border: 1px solid rgba(191,163,126,.14); cursor:pointer; }
.dot.is-active{ background: rgba(111,168,255,.58); border-color: rgba(111,168,255,.38); }

/* ===== ENCYCLOPEDIA ===== */
.encyclopedia-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 16px;
}

.select{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width: 180px;
}
.select label{ font-family:'Cinzel', serif; font-size: 12px; color: rgba(245,245,245,.72); }
.select select{
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(191,163,126,.18);
  background: rgba(0,0,0,.24);
  color: var(--light-colour);
  outline:none;
}
.select select:focus{ border-color: rgba(111,168,255,.40); box-shadow: 0 0 0 2px rgba(111,168,255,.12); }

.cards{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.card{
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(191,163,126,.18);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

/* Subtle rarity glow strip */
.card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(0,0,0,0), var(--rarity-glow, rgba(191,163,126,.20)), rgba(0,0,0,0));
  opacity: .78;
  pointer-events: none;
  box-shadow: 0 0 18px var(--rarity-glow, rgba(191,163,126,.18));
}

.card:hover{ transform: translateY(-2px); border-color: rgba(191,163,126,.32); background: rgba(0,0,0,.28); }
.card:hover::before{ opacity: .98; }

.card__top{
  display:flex;
  gap: 12px;
  padding: 12px 12px 10px;
  align-items:center;
}

.thumb{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(191,163,126,.18);
  background: rgba(0,0,0,.30);
  flex: 0 0 auto;
}

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

.card__title{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.card__name{ margin:0; font-family:'Cinzel', serif; color: var(--light-colour); font-size: 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.badges{ display:flex; gap: 8px; flex-wrap:wrap; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(191,163,126,.16);
  background: rgba(0,0,0,.24);
  color: rgba(245,245,245,.84);
  font-size: 12px;
  line-height: 1;
}

.badge img{ width: 14px; height: 14px; object-fit:contain; opacity:.95; }

.badge--rarity{ padding-left: 7px; }
.badge--rarity img{ width: 13px; height: 13px; opacity: .92; }

/* rarity accents */
.rarity-Common{ border-color: rgba(191,163,126,.16); --rarity-glow: rgba(191,163,126,.16); }
.rarity-Rare{ border-color: rgba(111,168,255,.30); box-shadow: 0 0 0 1px rgba(111,168,255,.12) inset; --rarity-glow: rgba(111,168,255,.32); }
.rarity-Epic{ border-color: rgba(187,120,255,.30); box-shadow: 0 0 0 1px rgba(187,120,255,.10) inset; --rarity-glow: rgba(187,120,255,.30); }
.rarity-Legendary{ border-color: rgba(255,205,92,.35); box-shadow: 0 0 0 1px rgba(255,205,92,.10) inset; --rarity-glow: rgba(255,205,92,.32); }
.rarity-Boss{ border-color: rgba(255,95,95,.30); box-shadow: 0 0 0 1px rgba(255,95,95,.10) inset; --rarity-glow: rgba(255,95,95,.30); }

.badge--rarity.rarity-Rare{ border-color: rgba(111,168,255,.28); }
.badge--rarity.rarity-Epic{ border-color: rgba(187,120,255,.26); }
.badge--rarity.rarity-Legendary{ border-color: rgba(255,205,92,.30); }
.badge--rarity.rarity-Boss{ border-color: rgba(255,95,95,.28); }

.card__bottom{ padding: 0 12px 12px; }
.card__meta{ color: rgba(245,245,245,.70); font-size: 12px; margin:0; }

/* ===== MODAL ===== */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.66);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 999;
}
.modal.is-open{ display:flex; }
.modal__card{
  width: min(920px, 100%);
  border-radius: var(--g-radius);
  background: rgba(0,0,0,.58);
  border: 1px solid rgba(191,163,126,.22);
  box-shadow: 0 18px 70px rgba(0,0,0,.58);
  overflow:hidden;
}
.modal__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(191,163,126,.14);
}
.modal__title{ margin:0; font-family:'Cinzel', serif; color: var(--light-colour); font-size: 19px; }
.modal__close{ width: 44px; height: 40px; }

.modal__body{
  padding: 16px;
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
}

.modal__thumb{
  width: 240px;
  aspect-ratio:1/1;
  border-radius: var(--g-radius);
  overflow:hidden;
  border: 1px solid rgba(191,163,126,.18);
  background: rgba(0,0,0,.30);
}
.modal__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.modal__text p{ margin: 0 0 10px; color: rgba(245,245,245,.80); line-height: 1.55; }
.modal__list{ margin: 0; padding-left: 18px; color: rgba(245,245,245,.76); line-height: 1.55; }

/* ===== TABLES (recipes/formulas) ===== */
.g-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 14px;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid rgba(191,163,126,.18);
}

.g-table th,
.g-table td{
  padding: 11px 12px;
  border-bottom: 1px solid rgba(191,163,126,.12);
  background: rgba(0,0,0,.22);
  color: rgba(245,245,245,.80);
  text-align:left;
}

.g-table th{
  font-family:'Cinzel', serif;
  color: var(--light-colour);
  font-weight: 700;
  background: rgba(0,0,0,.30);
}

.g-table tr:last-child td{ border-bottom: 0; }

/* Despertar Item - tabela com apenas imagens */
.cell-multi{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.g-table .awaken-item{
  width: 44px;
  height: 88px;
  object-fit: contain;
  display: block;
}

.g-table .rune-icon{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.awaken-arrow{
  opacity: .85;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}

.callout{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(111,168,255,.22);
  background: linear-gradient(145deg, rgba(111,168,255,.10), rgba(0,0,0,.22));
  color: rgba(245,245,245,.82);
}

/* ===== RESPONSIVE ===== */
@media (min-width: 1400px){
  .guides-shell{ grid-template-columns: 380px 1fr; }
  .cards{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}

@media (min-width: 1800px){
  .guides-wrap,
  .guides-hero{ width: min(1920px, calc(100% - 48px)); }
  .guides-shell{ grid-template-columns: 420px 1fr; }
}

@media (max-width: 980px){
  .guides-hero{ width: calc(100% - 24px); }
  .guides-wrap{ width: calc(100% - 24px); }
  .guides-shell{ grid-template-columns: 1fr; }
  .guides-sidebar{ position: relative; top: 0; max-height: none; }
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 560px){
  .guides-hero__content{ padding: 22px 16px; }
  .g-section{ padding: 16px 14px 18px; }
  .cards{ grid-template-columns: 1fr; }
  .modal__body{ grid-template-columns: 1fr; }
  .modal__thumb{ width: 100%; }
}


/* === Souls: banner em alta (desktop) === */
.cat-header[data-cat="souls"]{
  min-height: 260px;
  padding-top: 34px;
  padding-bottom: 28px;
}
.cat-header[data-cat="souls"] .cat-header__bg{
  opacity: 1;
  filter: none;
  transform: none;
}
.cat-header[data-cat="souls"] .cat-header__overlay{
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.40) 58%, rgba(0,0,0,.18) 100%);
}

@media (max-width: 768px){
  .cat-header[data-cat="souls"]{
    min-height: 170px;
    padding-top: 22px;
    padding-bottom: 18px;
  }
}


/* === Souls: infos fora do banner + banner full (desktop HQ) === */
.cat-meta{
  padding: 18px 18px 10px;
  border-bottom: 1px solid rgba(191,163,126,.14);
}
.cat-meta .breadcrumb{
  margin-bottom: 10px;
}
.cat-meta__title{
  margin: 0;
  font-size: 28px;
  letter-spacing: .3px;
}
.cat-meta__desc{
  margin: 8px 0 0;
  color: rgba(245,245,245,.72);
}

.cat-banner{
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cat-banner--souls{
  height: 440px; /* desktop: mais visível e vertical */
  filter: none;
  opacity: 1;
  /* Não cortar topo/rodapé do banner (mostrar 100% da arte) */
  background-size: contain;
  background-color: rgba(0,0,0,.26);
}

@media (max-width: 768px){
  .cat-banner--souls{
    height: 220px;
  }
  .cat-meta__title{ font-size: 22px; }
}


/* === Case (container visual) para infos do Souls === */
.cat-meta{
  background: linear-gradient(180deg, rgba(6,12,28,.85), rgba(6,12,28,.65));
  border: 1px solid rgba(191,163,126,.22);
  border-radius: 14px;
  padding: 22px 24px 20px;
  margin: 16px 18px 22px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 10px 28px rgba(0,0,0,.45);
}


/* === Central de Guias: BG decorativo === */
.guides-hero{
  position: relative;
  background: url('../images/guides/bg-central-guias.png') center/cover no-repeat;
  border-radius: 18px;
  overflow: hidden;
}

.guides-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,12,28,.78), rgba(6,12,28,.55));
  z-index: 0;
}

.guides-hero__content{
  position: relative;
  z-index: 1;
}


/* === Hero imagem Central de Guias === */
.guides-hero__content::before{
  content:'';
  display:block;
  width:250px;
  height:120px;
  margin:0 auto 16px;
  background:url('../images/guides/hero-guia.png') center/contain no-repeat;
}


/* === Centralizar texto do hero (descrição) === */
.guides-hero__content p{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
}

/* === Aumentar "case" dos botões/chips para botões PNG personalizados === */
.guides-hero__chips{
  margin-top: 22px;
  padding: 22px 22px;
  min-height: 120px;              /* mais área vertical */
  border-radius: 18px;
  background: rgba(6,12,28,.55);  /* base para destacar botões */
  border: 1px solid rgba(191,163,126,.20);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 16px;
}

/* deixa cada chip com área maior (até você trocar por PNG) */
.guides-hero__chips .chip,
.guides-hero__chips a,
.guides-hero__chips button{
  min-width: 180px;
  min-height: 58px;
}

/* Mobile */
@media (max-width: 768px){
  .guides-hero__chips{
    padding: 16px 14px;
    min-height: 96px;
    gap: 10px 12px;
  }
  .guides-hero__chips .chip,
  .guides-hero__chips a,
  .guides-hero__chips button{
    min-width: 150px;
    min-height: 54px;
  }
}


/* === Botão Souls personalizado (imagem) === */
#guidesQuickChips .chip[data-id="souls"],
#guidesQuickChips .chip--souls{
  background: url('../images/guides/buttons/souls.png') center/contain no-repeat !important;
  width: 260px;
  height: 96px;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* remove texto e ícone padrão do botão Souls */
#guidesQuickChips .chip[data-id="souls"] .chip__label,
#guidesQuickChips .chip--souls .chip__label,
#guidesQuickChips .chip[data-id="souls"] .chip__icon,
#guidesQuickChips .chip--souls .chip__icon{
  display: none !important;
}

/* opcional: feedback hover mantendo sua arte */
@media (hover:hover) and (pointer:fine){
  #guidesQuickChips .chip--souls:hover{
    transform: scale(1.02);
    filter: drop-shadow(0 0 10px rgba(255,190,80,.35));
  }
}


/* === Botões PNG personalizados (imagem) === */
#guidesQuickChips .chip[data-id="lista-itens"],
#guidesQuickChips .chip--lista-itens{
  background: url('../images/guides/buttons/itemlist.png') center/contain no-repeat !important;
  width: 260px;
  height: 96px;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

#guidesQuickChips .chip[data-id="reliquias"],
#guidesQuickChips .chip--reliquias{
  background: url('../images/guides/buttons/relics.png') center/contain no-repeat !important;
  width: 260px;
  height: 96px;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

#guidesQuickChips .chip[data-id="combos-boss"],
#guidesQuickChips .chip--combos-boss{
  background: url('../images/guides/buttons/setboss.png') center/contain no-repeat !important;
  width: 260px;
  height: 96px;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

#guidesQuickChips .chip[data-id="despertar"],
#guidesQuickChips .chip--despertar{
  background: url('../images/guides/buttons/despertar.png') center/contain no-repeat !important;
  width: 260px;
  height: 96px;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}


#guidesQuickChips .chip[data-id="crafting"],
#guidesQuickChips .chip--crafting{
  background: url('../images/guides/buttons/crafting.png') center/contain no-repeat !important;
  width: 260px;
  height: 96px;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* esconde label/ícone padrão nos botões PNG */
#guidesQuickChips .chip[data-id="lista-itens"] .chip__label,
#guidesQuickChips .chip[data-id="lista-itens"] .chip__icon,
#guidesQuickChips .chip[data-id="reliquias"] .chip__label,
#guidesQuickChips .chip[data-id="reliquias"] .chip__icon,
#guidesQuickChips .chip[data-id="combos-boss"] .chip__label,
#guidesQuickChips .chip[data-id="combos-boss"] .chip__icon,
#guidesQuickChips .chip[data-id="despertar"] .chip__label,
#guidesQuickChips .chip[data-id="despertar"] .chip__icon,
#guidesQuickChips .chip[data-id="crafting"] .chip__label,
#guidesQuickChips .chip[data-id="crafting"] .chip__icon{
  display: none !important;
}

/* hover leve mantendo a arte */
@media (hover:hover) and (pointer:fine){
  #guidesQuickChips .chip[data-id="lista-itens"]:hover,
  #guidesQuickChips .chip[data-id="reliquias"]:hover,
  #guidesQuickChips .chip[data-id="combos-boss"]:hover,
  #guidesQuickChips .chip[data-id="despertar"]:hover,
  #guidesQuickChips .chip[data-id="crafting"]:hover{
    transform: scale(1.02);
    filter: drop-shadow(0 0 10px rgba(255,190,80,.35));
  }
}


/* Souls list (below slides) */
.souls-table{
  margin-top: 18px;
}

.souls-grid{
  --status-w: 207px; /* matches card.png */
  --status-h: 180px; /* matches card.png */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.soul-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.soul-card__top{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.soul-card__img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));
}

.soul-card__name{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.1;
}

.soul-card__status{
  width: min(var(--status-w), 100%);
  aspect-ratio: 207 / 180;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.18);
    background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
position: relative;
  overflow: hidden;
}

.soul-card__status::after{
  content: 'STATUS (em breve)';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  opacity: 0.55;
  letter-spacing: .6px;
}


.soul-card__status.has-status::after{
  content: none;
}


/* === PATCH RELIQUIAS: Icon sizes + Tooltip + Labels === */
.g-table--reliquias .cell{gap:10px;}
.g-table--reliquias .cell__text{display:flex; flex-direction:column; line-height:1.05;}
.g-table--reliquias .cell__name{font-weight:700;}
.g-table--reliquias .cell__code{opacity:.65; font-size:.85em;}

/* Icon sizing (requested) */
.g-table--reliquias .icon-relic{width:44px;height:88px;object-fit:contain;}
.g-table--reliquias .icon-recipe{width:44px;height:44px;object-fit:contain;}
.g-table--reliquias .icon-rune{width:22px;height:22px;object-fit:contain;}

/* Tooltip */
.tt{position:relative; display:inline-flex; align-items:center;}
.tt::after{content:attr(data-tooltip); position:absolute; bottom:115%; left:50%; transform:translateX(-50%) translateY(4px); background:rgba(15,15,20,.96); color:#f5e6c8; padding:6px 10px; border-radius:8px; white-space:nowrap; font-size:12px; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; box-shadow:0 10px 24px rgba(0,0,0,.55); border:1px solid rgba(212,175,55,.5); z-index:60;}
.tt::before{content:''; position:absolute; bottom:106%; left:50%; transform:translateX(-50%); border-width:7px; border-style:solid; border-color:rgba(15,15,20,.96) transparent transparent transparent; opacity:0; transition:opacity .18s ease; z-index:61;}
.tt:hover::after,.tt:hover::before{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width: 720px){
  /* Em mobile, evita tooltip gigante */
  .tt::after{white-space:normal; width:220px; text-align:center;}
}


/* === PATCH v7 RELIQUIAS: fix icon sizes + remove codes (visual) === */
/* Guarantee icon sizes override any earlier .thumb rules */
.g-table--reliquias .cell img.thumb.icon-relic{
  width:44px !important;
  height:88px !important;
  object-fit:contain !important;
  border-radius:10px;
}
.g-table--reliquias .cell img.thumb.icon-recipe{
  width:44px !important;
  height:44px !important;
  object-fit:contain !important;
  border-radius:10px;
}

/* Rune icon inside pill */
.g-table--reliquias .cell-mini img.icon-rune{
  width:22px !important;
  height:22px !important;
  object-fit:contain !important;
  border-radius:8px;
}

/* Hide any remaining code text (safety) */
.g-table--reliquias .cell__code{ display:none !important; }

/* Rune label should be name-only; keep compact */
.g-table--reliquias .cell-mini .mini-label{
  font-size:12px;
  color: rgba(245,245,245,.78);
  letter-spacing:.1px;
}
/* If label is empty (fallback), remove spacing */
.g-table--reliquias .cell-mini .mini-label:empty{ display:none; }


/* === PATCH v10 RELIQUIAS: chance/gold + remove copiar === */
.g-table--reliquias .th-small{ width: 120px; }
.g-table--reliquias .cell-chance,
.g-table--reliquias .cell-gold{
  padding-left: 14px;
  font-weight: 700;
  color: rgba(245,245,245,.88);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.g-table--reliquias .cell-gold{ opacity: .9; }


/* Despertar Item - linha de craft (Receita > Runas > Resultado) */
.g-craft-inline{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--g-border);
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.g-craft-inline__group{display:flex; align-items:center; gap:8px;}
.g-craft-inline__label{opacity:.9; font-weight:600;}
.g-craft-inline__icons{display:flex; align-items:center; gap:6px;}
.g-craft-inline__sep{opacity:.65; padding:0 2px;}
.g-craft-inline__result{font-weight:700; letter-spacing:.2px;}
.g-item-44{width:44px; height:88px; image-rendering:auto;}
.g-item-22{width:22px; height:22px; image-rendering:auto;}
/* ============================================================
   PATCH: COMBOS ITENS BOSS — ÍCONES DENTRO DA BASE (SEM RESIZE)
   Escopo travado no container gerado pelo renderer:
   <div id="g-combos-boss-tables">...</div>
   ============================================================ */
#g-combos-boss-tables .boss-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;

  /* Base/slot (mantém o padrão visual do guia) */
  min-width:48px;
  min-height:48px;
  padding:6px;
  border-radius:10px;

  border:1px solid rgba(191,163,126,.42);
  background: linear-gradient(180deg, rgba(20,30,60,.90), rgba(5,10,20,.95));
  box-shadow:
    inset 0 0 0 1px rgba(191,163,126,.18),
    0 0 10px rgba(255,180,60,.10);
}

/* Se a imagem estiver dentro da base, mantém tamanho original,
   apenas impede de "vazar" do slot. */
#g-combos-boss-tables .boss-item img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* Hover suave (só no Combos Boss) */
#g-combos-boss-tables .boss-item:hover{
  border-color: rgba(191,163,126,.72);
  box-shadow:
    inset 0 0 0 1px rgba(191,163,126,.34),
    0 0 16px rgba(255,200,80,.22);
}


/* --- Crafting: cell stack + chances box --- */
.cell-stack{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cell-stack__item{
  display:flex;
  align-items:center;
  gap:10px;
}
.cell-stack__item img{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:0 0 auto;
}

/* Crafting: recipe icons (ensure correct size + inventory slot look)
   We apply the slot styling directly on the <img> because the table renderer
   outputs images inside .cell without an extra wrapper.
*/
img.craft-recipe{
  /* slot visuals */
  display:inline-block;
  padding:4px;
  border-radius:6px;
  border:1px solid rgba(255, 200, 120, 0.45);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.35));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.60),
    inset 0 2px 4px rgba(255,255,255,0.08),
    0 2px 6px rgba(0,0,0,0.60);
  box-sizing: content-box;
  max-width:none !important;
  max-height:none !important;
}

/* Sizes (do not change) */
img.craft-recipe.weapon-recipe{
  width:44px !important;
  height:66px !important;
  object-fit:contain;
}
img.craft-recipe.armor-recipe,
img.craft-recipe.robe-recipe{
  width:44px !important;
  height:44px !important;
  object-fit:contain;
}

.g-overview__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.g-overview__main{
  flex:1 1 auto;
  min-width:0;
}
.chance-box{
  flex:0 0 auto;
  width: 320px;
  border:1px solid rgba(191,163,126,0.35);
  background: rgba(8,16,40,0.65);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.chance-box__title{
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:10px;
}
.chance-box__table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.chance-box__table th,
.chance-box__table td{
  padding:8px 6px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  text-align:left;
}
.chance-box__table thead th{
  opacity:0.85;
  font-weight:600;
}
@media (max-width: 900px){
  .g-overview__row{
    flex-direction:column;
  }
  .chance-box{
    width:100%;
  }
}

/* Item List embed */
.guide-embed{
  border:1px solid rgba(191,163,126,0.25);
  background: rgba(8,16,40,0.55);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}
.guide-embed__frame{
  width: 100%;
  height: 1100px;
  border: 0;
  border-radius: 14px;
  background: transparent;
}
@media (max-width: 980px){
  .guide-embed__frame{ height: 1200px; }
}


/* Ultra subtle noise layer (premium texture) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  background: url("/assets/img/noise.png");
  opacity: .035;
  pointer-events: none;
  z-index: 0;
}

/* Ensure main layers stay above noise */
body > *{
  position: relative;
  z-index: 1;
}