/* ---------- WIKI ---------- */

.wiki-intro{
  max-width:760px;margin:0 auto 10px;text-align:center;color:var(--text-dim);
  font-size:1.02rem;line-height:1.7;
}

.wiki-toc{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  margin:0 0 10px;
  padding:10px;border-radius:8px;
}
.wiki-toc a{
  position:relative;
  padding:9px 20px;border:1px solid var(--border);border-radius:30px;
  color:var(--text-dim);font-family:'Cinzel',serif;font-size:0.76rem;
  letter-spacing:1.5px;text-transform:uppercase;
  background:rgba(255,255,255,0.02);
  transition:all 0.25s ease;
}
.wiki-toc a:hover{
  border-color:var(--gold);color:var(--gold-bright);
  background:rgba(216,171,95,0.1);
  box-shadow:0 0 18px rgba(216,171,95,0.25);
  transform:translateY(-2px);
}
.wiki-toc a.active{
  border-color:var(--gold);color:#120a09;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow:0 4px 16px rgba(216,171,95,0.35);
}

/* map cards */
.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:10px;}
@media(max-width:900px){.map-grid{grid-template-columns:1fr;}}

.map-card{
  overflow:hidden;position:relative;
  transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  opacity:0;transform:translateY(24px);
}
.map-card.in-view{opacity:1;transform:translateY(0);}
.map-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 18px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(216,171,95,0.15);
}

.map-card.wide{grid-column:1 / -1;}
.map-card.wide.in-view{transform:none;}
.map-card.wide:hover{transform:none;}

.boss-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:4px;}
.boss-col{flex:1 1 260px;min-width:240px;}
.boss-col .map-boss{margin-bottom:12px;}
.boss-col .drop-grid{margin-bottom:0;}

@media(max-width:700px){
  .boss-row{flex-direction:column;}
  .boss-col{min-width:0;}
}

.map-img-placeholder{
  height:190px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
  background:
    repeating-linear-gradient(135deg, rgba(216,171,95,0.05) 0 12px, rgba(216,171,95,0.02) 12px 24px),
    linear-gradient(135deg, #2a1712, #120c09);
  border-bottom:2px solid var(--red);
  color:var(--text-dim);text-align:center;
}
.map-img-placeholder .ph-icon{font-size:1.8rem;opacity:0.6;}
.map-img-placeholder span{font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:1.5px;text-transform:uppercase;}

/* to swap in a real screenshot later: replace the .map-img-placeholder <div> with
   <img src="Content/img/wiki/NOME-DO-MAPA.jpg" alt="Mapa X" class="map-img" /> */
.map-img{
  width:100%;height:190px;object-fit:cover;display:block;border-bottom:2px solid var(--red);
  transition:transform 0.6s ease, filter 0.6s ease;
}
.map-card:hover .map-img{transform:scale(1.08);filter:brightness(1.05);}

.map-card .body{padding:20px 22px;}

.map-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap;
}
.map-card-head h4{color:var(--gold-bright);font-size:1.15rem;letter-spacing:0.5px;}

.lvl-badge{
  display:inline-block;padding:5px 14px;border-radius:30px;white-space:nowrap;
  background:linear-gradient(135deg, rgba(216,171,95,0.18), rgba(216,171,95,0.05));
  border:1px solid var(--gold);color:var(--gold-bright);
  font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:1px;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}

.badge-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

.type-badge{
  display:inline-block;padding:5px 14px;border-radius:30px;white-space:nowrap;
  background:linear-gradient(135deg, rgba(201,48,44,0.22), rgba(140,28,28,0.08));
  border:1px solid var(--red-bright);color:#ffb3b3;
  font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:1px;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}

.map-card p.desc{color:var(--text-dim);font-size:0.88rem;margin-bottom:16px;}

.map-boss{
  display:flex;align-items:center;gap:16px;
  padding:14px;margin-bottom:16px;
  background:linear-gradient(135deg, rgba(140,28,28,0.14), rgba(140,28,28,0.04));
  border:1px solid var(--red);border-radius:6px;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.map-boss:hover{border-color:var(--gold);box-shadow:0 0 24px rgba(216,171,95,0.12);}
.map-boss .boss-thumb{
  flex:none;border-radius:8px;padding:8px;width:230px;height:230px;
  background:radial-gradient(circle at 30% 30%, var(--red-bright), var(--red) 60%, #3a0a0a);
  border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  overflow:hidden;position:relative;
  box-shadow:0 0 0 4px rgba(216,171,95,0.08), 0 10px 30px rgba(0,0,0,0.45);
  transition:box-shadow 0.3s ease, transform 0.3s ease;
}
.map-boss:hover .boss-thumb{
  transform:scale(1.03);
  box-shadow:0 0 0 4px rgba(216,171,95,0.18), 0 14px 36px rgba(0,0,0,0.55);
}
.map-boss .boss-thumb img{
  display:block;width:100%;height:100%;object-fit:contain;
  transition:transform 0.4s ease;
}
.map-boss:hover .boss-thumb img{transform:scale(1.05);}
@media(max-width:600px){
  .map-boss{flex-direction:column;text-align:center;}
  .map-boss .boss-thumb{width:100%;max-width:230px;}
}
.map-boss .boss-info{line-height:1.35;}
.map-boss .boss-label{font-size:0.68rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);}
.map-boss .boss-name{color:var(--gold-bright);font-family:'Cinzel',serif;font-size:0.92rem;}

.drop-title{
  font-size:0.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);
  margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.drop-title::before{
  content:"";width:14px;height:1px;background:var(--gold);display:inline-block;
}
.drop-grid{display:flex;flex-wrap:wrap;gap:10px;}
.drop-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px 6px 6px;border:1px solid var(--border);border-radius:6px;
  background:linear-gradient(180deg, #100b09, #0d0908);
  transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.drop-item:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:0 8px 18px rgba(0,0,0,0.4);
}
.drop-item img{
  width:32px;height:32px;object-fit:contain;image-rendering:pixelated;flex:none;
  transition:transform 0.25s ease;
}
.drop-item:hover img{transform:scale(1.15) rotate(-2deg);}
.drop-item span{font-size:0.82rem;color:var(--text);}

.drop-item.set-item{border-color:var(--gold);}
.drop-set-note{width:100%;font-size:0.75rem;color:var(--text-dim);margin-top:6px;}

/* drop item with hover tooltip (e.g. a box/chest with multiple possible drops) */
.drop-item.has-tooltip{position:relative;cursor:help;}
.drop-item.has-tooltip:hover,
.drop-item.has-tooltip.tooltip-open{border-color:var(--gold);}
/* must cancel the generic .drop-item:hover transform: it would create a new
   containing block for the position:fixed .drop-tooltip below, breaking the
   viewport-relative coordinates computed in JS and hiding the tooltip */
.drop-item.has-tooltip:hover{transform:none;}

.drop-tooltip{
  display:none;
  position:fixed;top:0;left:0;
  width:340px;max-width:90vw;z-index:999;
  background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--gold);border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  padding:12px;
  cursor:default;
}
.drop-tooltip.tooltip-visible{display:block;}

.drop-tooltip-title{
  font-family:'Cinzel',serif;font-size:0.7rem;letter-spacing:1px;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:8px;text-align:center;
}
.drop-tooltip-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  max-height:260px;overflow-y:auto;
}
.drop-tooltip-grid .mini-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 4px;border:1px solid var(--border);border-radius:4px;background:#0d0908;
  text-align:center;
}
.drop-tooltip-grid .mini-item img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated;}
.drop-tooltip-grid .mini-item span{font-size:0.68rem;color:var(--text);line-height:1.2;}

/* cube / transmute placeholder table */
.cube-table{width:100%;border-collapse:collapse;font-size:0.9rem;}
.cube-table th{
  text-align:left;padding:12px 14px;background:#0d0908;color:var(--gold);
  text-transform:uppercase;font-size:0.72rem;letter-spacing:1px;border-bottom:2px solid var(--red);
}
.cube-table td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text-dim);transition:background 0.2s ease;}
.cube-table tr:last-child td{border-bottom:none;}
.cube-table tr:hover td{background:rgba(216,171,95,0.05);}

/* scroll-reveal for sections */
.section-title{opacity:0;transform:translateY(16px);transition:opacity 0.6s ease, transform 0.6s ease;}
.section-title.in-view{opacity:1;transform:translateY(0);}