/* A fonte do Google (Cormorant Garamond/Inter/JetBrains Mono) NÃO é mais
   importada aqui via @import de propósito -- um @import só é descoberto
   pelo navegador DEPOIS de baixar e interpretar este arquivo inteiro,
   criando um salto a mais na cadeia de carregamento (HTML -> codex.css
   -> CSS da fonte -> arquivos .woff2). Está como <link> direto em
   partials/head.php, que o navegador já descobre no HTML, em paralelo
   com este arquivo. Não mova de volta pra @import sem motivo forte. */

:root{
  --bg:            #0a0d14;
  --bg-vignette:   radial-gradient(ellipse 80% 60% at 50% -10%, #1a1230 0%, #0a0d14 55%);
  --panel:         #12151f;
  --panel-2:       #171b28;
  --hairline:      #262b3d;
  --text:          #c7cbdb;
  --text-dim:      #7a7f97;
  --text-bright:   #f0f1f7;
  --text-red-bright: #ffa4a4;
  --text-green-bright: #b6fdb3;
  
  --panel-excluido: rgba(255,0,0,0.05);
  --panel-stub: rgba(55,55,55,0.06);
  --panel-incapturavel: rgba(255,168,0,0.05);

  --accent:        #9d7cf0;   /* ametista - Sombra */
  --accent-soft:   rgba(157,124,240,.16);
  --accent-line:   rgba(157,124,240,.35);
  --white:         #fff;   /* lendário */
  --white-soft:    rgba(255,255,255,.14);
  --level-bg:      #12151f;
  --gold:          #cba86a;   /* lendário */
  --gold-soft:     rgba(203,168,106,.14);

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}

body{
  background: var(--bg-vignette), var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height:100vh;
  padding-bottom: 4rem;
}

/* ---------- Habilidades Passivas (passiveSkill_Badge) ----------
   Primeira versão do visual — ajuste as cores se não bater com o
   que você imaginou pra cada rank. */
.skill-badge{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border-radius:8px;
  padding:.65rem 1rem;
  font-family: var(--font-display);
  font-weight:700;
  border:1px solid transparent;
}
.skill-badge__name{ font-size:1rem; }
.skill-badge__icon{
  width:14px; height:14px;
  border-radius:50%;
  flex-shrink:0;
}
.skill-badge--negative{ background: rgba(255,58,58,.12); border-color:#ff3a3a; color:#ff3a3a; }
.skill-badge--negative .skill-badge__icon{ background:#ff3a3a; }
.skill-badge--common{ background: var(--panel-2); border-color: var(--hairline); color: var(--text); }
.skill-badge--common .skill-badge__icon{ background: #8b93a7; }
.skill-badge--uncommon{ background: rgba(79,209,197,.12); border-color:#4fd1c5; color:#4fd1c5; }
.skill-badge--uncommon .skill-badge__icon{ background:#4fd1c5; }
.skill-badge--legendary{ background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
.skill-badge--legendary .skill-badge__icon{ background: var(--gold); }
.skill-badge--rainbow{ background: rgba(79,255,216,.12); border-color:#4fffd8; color:#4fffd8; }
.skill-badge--rainbow .skill-badge__icon{ background:#4fffd8; }
.skill-badge--world-tree{ background: rgba(102,255,210,.12); border-color:#66ffd2; color:#66ffd2; }
.skill-badge--world-tree .skill-badge__icon{ background:#66ffd2; }

/* ---------- Marca ---------- */

.codex-brand{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.4rem;
  color: var(--text-bright);
  letter-spacing:.02em;
}
.codex-brand .dot{ color: var(--accent); }

/* ---------- Hero ---------- */
.hero-panel{
  background: linear-gradient(155deg, var(--panel) 0%, #0d1019 100%);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  padding: 2.25rem;
}
.hero-panel::before{
  content:"";
  position:absolute; inset:0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--accent) 0%, transparent 40%) top left / 46% 2px no-repeat,
    linear-gradient(-90deg, var(--accent) 0%, transparent 40%) top right / 46% 2px no-repeat;
  opacity:.55;
}
.hero-eyebrow{
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  color: var(--text-dim);
  text-transform:uppercase;
}
.hero-portrait{
  width:150px; height:150px;
  border-radius:50%;
  border:2px solid var(--accent-line);
  box-shadow: 0 0 0 6px var(--accent-soft), 0 0 40px -6px var(--accent);
  object-fit:cover;
  background: var(--panel-2);
}
.hero-name{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 3rem;
  line-height:1;
  color: var(--text-bright);
  margin:.1rem 0 .15rem;
}
.hero-subtitle{
  font-family: var(--font-display);
  font-style:italic;
  font-size:1.25rem;
  color: var(--text-dim);
}
.badge-rarity{
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  border:1px solid var(--rarity-color, var(--gold));
  color: var(--rarity-color, var(--gold));
  background: color-mix(in srgb, var(--rarity-color, var(--gold)) 16%, transparent);
  padding:.35em .7em;
  border-radius:20px;
}
.badge-element{
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  border:1px solid var(--hairline);
  color: var(--element-color, var(--accent));
  background: var(--panel-2);
  padding:.35em .7em;
  border-radius:20px;
}
.lore-box{
  border-left: 2px solid var(--accent-line);
  background: rgba(255,255,255,.02);
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.65;
  border-radius: 0 8px 8px 0;
}

/* ---------- Section headings ---------- */
.section-title{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  color: var(--text-bright);
  margin-bottom:1rem;
  display:flex; align-items:center; gap:.6rem;
}
.section-title::after{
  content:"";
  flex:1;
  height:1px;
  background: linear-gradient(90deg, var(--hairline), transparent);
}

/* ---------- Stats (runas) ---------- */
.stat-row{ margin-bottom:1rem; }
.stat-row:last-child{ margin-bottom:0; }
.stat-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.82rem; color: var(--text-dim); margin-bottom:.3rem;
}
.stat-label .val{
  font-family: var(--font-mono);
  color: var(--text-bright);
  font-weight:600;
  font-size:.85rem;
}
.stat-track{
  height:6px;
  background: var(--hairline);
  border-radius:3px;
  position:relative;
  overflow:visible;
}
.stat-fill{
  height:100%;
  border-radius:3px;
  background: linear-gradient(90deg, var(--accent), #d7a9ff);
  position:relative;
}
.stat-fill::after{
  content:"";
  position:absolute; right:-2px; top:50%;
  width:8px; height:8px;
  transform:translateY(-50%);
  border-radius:50%;
  background: #e8d4ff;
  box-shadow: 0 0 8px 2px var(--accent);
  animation: rune-pulse 2.2s ease-in-out infinite;
}
@keyframes rune-pulse{
  0%,100%{ opacity:.65; box-shadow:0 0 6px 1px var(--accent); }
  50%{ opacity:1; box-shadow:0 0 12px 4px var(--accent); }
}
@media (prefers-reduced-motion: reduce){
  .stat-fill::after{ animation:none; }
}

/* ---------- Cards / panels ---------- */
.panel{
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius:12px;
  padding:1.5rem;
}

/* Combinações */
.combo-row{
  display:grid;
  grid-template-columns: 76px 28px 76px 28px 76px;
  align-items:start;
  justify-items:center;
  column-gap:.5rem;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:1rem .85rem;
  margin-bottom:.75rem;
}
.combo-row:last-child{ margin-bottom:0; }
.combo-slot{
  width:76px;
  display:flex; flex-direction:column; align-items:center;
}
.combo-thumb{
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--hairline);
  object-fit:cover; background:#0e1119;
  flex-shrink:0;
}
.combo-op{
  color: var(--text-dim);
  font-size:1.1rem;
  line-height:1;
  align-self:center;
  margin-top:1rem;
}
.combo-op-eq{
  color: var(--accent);
  font-weight:700;
  font-size:1.25rem;
}
.combo-name{
  font-size:.76rem;
  color: var(--text-dim);
  text-align:center;
  margin-top:.4rem;
  width:100%;
  white-space:wrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Trabalhos */
.work-chip{
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:.75rem 1rem;
  display:grid;
  grid-template-columns: auto 1fr 72px;
  align-items:center;
  column-gap:.65rem;
  width:100%;
}
.work-chip i{ color: var(--accent); font-size:1.25rem; }
.work-chip img.icon-img{ width:1.25rem; height:1.25rem; }
.work-name{ color: var(--text); }
.work-chip .lvl{
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--white);
  border:1px solid var(--white);
  background: var(--level-bg);
  border-radius:6px;
  padding:.1em 1em;
  text-align:center;
  justify-self:center;
}

/* Habilidade de Parceiro */
.partner-box{
  background: linear-gradient(155deg, var(--accent-soft), transparent 60%), var(--panel-2);
  border:1px solid var(--accent-line);
  border-radius:12px;
  padding:1.25rem 1.4rem;
}
.partner-box h4{
  font-family: var(--font-display);
  color: var(--text-bright);
  font-size:1.3rem;
  margin-bottom:.4rem;
}

/* ---------- Timeline de habilidades ---------- */
.ability-timeline{
  position:relative;
  padding-left: 2.1rem;
}
.ability-timeline::before{
  content:"";
  position:absolute; left:.62rem; top:.4rem; bottom:.4rem;
  width:1px;
  background: linear-gradient(var(--accent-line), var(--hairline));
}
.ability-item{ position:relative; margin-bottom:.9rem; }
.ability-item:last-child{ margin-bottom:0; }
.ability-node{
  position:absolute; left:-2.1rem; top:1.05rem;
  width:11px; height:11px; border-radius:50%;
  background: var(--bg);
  border:2px solid var(--accent);
}
.ability-item.exclusive .ability-node{
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px 1px var(--gold-soft);
}
.ability-timeline.no-timeline{
  padding-left: 0;
}
.ability-timeline.no-timeline::before{
  display: none;
}
.ability-timeline.no-timeline .ability-node{
  display: none;
}
.ability-header{
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:.85rem 1.1rem;
  cursor:pointer;
  display:flex; align-items:center; gap:.75rem;
  user-select:none;
  transition: border-color .15s ease;
}
.ability-header:hover{ border-color: var(--accent-line); }
.ability-item.exclusive .ability-header{ border-color: rgba(203,168,106,.4); }
.ability-lvl{
  font-family: var(--font-mono);
  font-size:.72rem;
  color: var(--text-dim);
  white-space:nowrap;
}
.ability-name{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.15rem;
  color: var(--text-bright);
  flex:1;
}
.ability-chevron{
  color: var(--text-dim);
  transition: transform .2s ease;
  font-size:.85rem;
}
.ability-item.open .ability-chevron{ transform: rotate(180deg); }
.ability-body{
  display:none;
  padding: .9rem 1.1rem 1rem;
  background: rgba(255,255,255,.015);
  border:1px solid var(--hairline);
  border-top:none;
  border-radius:0 0 10px 10px;
  margin-top:-1px;
}
.ability-item.open .ability-body{ display:block; }
.ability-stat{
  font-family: var(--font-mono);
  font-size:.75rem;
  border:1px solid var(--hairline);
  border-radius:6px;
  padding:.2em .55em;
  color: var(--text);
  margin-right:.4rem;
  display:inline-block;
  margin-bottom:.4rem;
}
.ability-stat b{ color: var(--accent); font-weight:600; }
.ability-desc{ font-size:.92rem; color: var(--text); line-height:1.55; margin-top:.35rem; }
.ability-detail-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top: .8rem;
  font-size:.82rem;
  color: var(--accent);
  text-decoration:none;
}
.ability-detail-link:hover{ color: var(--text-bright); }
.ability-detail-link i{ font-size:.7rem; transition: transform .15s ease; }
.ability-detail-link:hover i{ transform: translateX(3px); }

/* ---------- Itens ---------- */
.item-table{ width:100%; border-collapse: collapse; }
.item-table th{
  font-family: var(--font-mono);
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--text-dim);
  text-align:left;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--hairline);
}
.item-table td{
  padding:.6rem 0;
  border-bottom:1px solid var(--hairline);
  font-size:.92rem;
}
.item-table tr:last-child td{ border-bottom:none; }
.item-thumb{
  width:28px; height:28px; border-radius:6px;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  object-fit:cover;
  margin-right:.5rem;
}
.item-rate{
  font-family: var(--font-mono);
  color: var(--accent);
}

/* ---------- Navbar (compartilhada via partials/header.php) ---------- */
.site-nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 50;
  background: rgba(10,13,20,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  padding: .85rem 0;
}
.site-nav-spacer{ height: 78px; }

/* Menu colapsado (<1200px, .navbar-expand-xl): .site-nav é fixed, então
   se o conteúdo expandido (ex.: o acordeão "Pals" com ~20 itens) passar
   da altura da tela, não tem como rolar até o resto -- a página por trás
   não rola porque o nav é fixed, e sem overflow o próprio nav também não
   rola. Trava a altura máxima ao espaço abaixo do cabeçalho (78px, igual
   ao .site-nav-spacer) e deixa ESSA área rolar internamente. */
@media (max-width: 1199.98px){
  .site-nav .navbar-collapse.show,
  .site-nav .navbar-collapse.collapsing{
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.site-nav .codex-brand{ display:flex; align-items:center; gap:.55rem; }
.site-nav .codex-brand-mark{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--accent-line);
  background: var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight:700;
  flex-shrink:0;
}
/* Alvos de toque confortáveis (>= ~44px de altura, guideline de
   acessibilidade) tanto no menu expandido (>=1200px, .navbar-expand-xl)
   quanto no colapsado (hambúrguer) -- antes eram só 38px de altura com
   6px de espaço entre eles, fácil de errar o clique em qualquer tamanho
   de tela. */
.site-nav .navbar-nav{ gap: .5rem; }
.site-nav .nav-link{
  font-family: var(--font-body);
  font-size:.92rem;
  color: var(--text) !important;
  padding: .7rem 1rem !important;
  border-radius: 8px;
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus{
  color: var(--text-bright) !important;
  background: rgba(255,255,255,.04);
}
.site-nav .nav-link.active{
  color: var(--text-bright) !important;
  background: var(--accent-soft);
}
/* Gira a seta do dropdown quando expandido -- no menu colapsado
   (mobile/tablet) o dropdown já abre inline (position:static, o
   Bootstrap cuida disso via .navbar-expand-xl), então visualmente já
   funciona como um acordeão; a seta girando só deixa esse estado mais
   claro pro usuário. */
.site-nav .dropdown-toggle::after{ transition: transform .2s ease; }
.site-nav .dropdown-toggle[aria-expanded="true"]::after{ transform: rotate(180deg); }
.site-nav .dropdown-menu{
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius: 10px;
  padding: .5rem;
  margin-top: .4rem;
}
.site-nav .dropdown-item{
  color: var(--text);
  font-size:.88rem;
  border-radius: 6px;
  padding: .7rem .9rem;
  text-decoration: none;
}
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus{
  background: var(--accent-soft);
  color: var(--text-bright);
}
.home-search{
  background: var(--panel-2);
  border:1px solid var(--hairline);
  color: var(--text);
  border-radius: 8px 0 0 8px;
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.home-search:focus{
  background: var(--panel-2);
  color: var(--text-bright);
  border-color: var(--accent-line);
  box-shadow: none;
}
.home-search-btn{
  border:1px solid var(--accent-line);
  border-left:none;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 0 8px 8px 0;
  font-size:.85rem;
  padding: 0 1.1rem;
}
.home-search-btn:hover{ background: var(--accent); color: #0a0d14; }

/* Alvo de toque do botão hambúrguer -- único ponto de entrada pro menu
   inteiro no colapsado, então precisa ser fácil de acertar. */
.site-nav .navbar-toggler{ padding: .55rem .8rem; }
.site-nav .navbar-toggler:focus{ box-shadow: 0 0 0 3px var(--accent-soft); }

/* Botões de sessão (Entrar / painel do usuário) na navbar -- exclui
   .home-search-btn, que já tem o próprio padding pra casar com a altura
   do campo de busca ao lado. */
.site-nav .btn:not(.home-search-btn){ padding: .55rem 1rem; }

/* ---------- Rodapé (compartilhado via partials/footer.php) ---------- */
.site-footer{
  border-top: 1px solid var(--hairline);
  margin-top: 4rem;
  padding: 2.5rem 0 1.75rem;
}
.site-footer-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
  text-align:center;
  margin-bottom: 1.5rem;
}
.site-footer-brand{
  display:flex; align-items:center; gap:.5rem;
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color: var(--text-bright);
}
.site-footer-tagline{
  font-size:.85rem;
  color: var(--text-dim);
  margin:0;
}
.site-footer-bottom{
  text-align:center;
  font-size:.78rem;
  color: var(--text-dim);
  border-top: 1px solid var(--hairline);
  padding-top: 1.25rem;
}
.element-icon-img{
  width: 1.4em;
  height: 1.4em;
  object-fit: contain;
  vertical-align: -0.125em;
  margin-right: .3em;
}
.element-icon-img-2{
  width: 1.8em;
  height: 1.8em;
  object-fit: contain;
  vertical-align: -0.125em;
  margin-right: .3em;
}
.element-icon-img-4{
  width: 1.8em;
  height: 1.8em;
  object-fit: contain;
  vertical-align: -0.125em;
}
.element-icon-img-5{
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: -0.125em;
}

/* Ícone genérico em formato de imagem (elemento/trabalho), usado por
   pals.php, habilidade.php e itens.php nos chips de filtro e badges */
.icon-img{
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: -0.125em;
  display: inline-block;
}
.work-aptitude-badge{
  display:inline-flex;
  align-items:stretch;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius: 8px;
  overflow:hidden;
  font-family: var(--font-mono);
  font-size:.78rem;
}
.work-aptitude-badge{
  display:inline-flex;   /* <- isso é o que faz os filhos ficarem lado a lado */
  align-items:stretch;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius: 8px;
  overflow:hidden;
  font-family: var(--font-mono);
  font-size:.78rem;
}
.work-aptitude-icon{
  display:flex;
  align-items:center;
}
.work-aptitude-divider{
  width:1px;
  background: var(--hairline);
}
.work-aptitude-value{
  display:flex;
  align-items:center;
  color: var(--text-bright);
  font-weight:600;
  padding: .15rem .2rem;
}

/* Estilização da "barra de progresso" das aptidões de trabalho */
.work-apt-item{ margin-bottom: .85rem; }
.work-apt-item:last-child{ margin-bottom: 0; }

.work-apt-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.4rem;
}
.work-apt-name{ flex:1; color: var(--text); }
.work-apt-value{
  font-family: var(--font-mono);
  font-size:.78rem;
  font-weight:600;
  color: var(--text-bright);
  border:1px solid var(--hairline);
  border-radius:6px;
  padding: .1rem .55rem;
  min-width: 1.6em;
  text-align:center;
}

.work-apt-pips{
  display:flex;
  gap: 3px;
}
.work-apt-pip{
  flex:1;
  height: 5px;
  border-radius: 2px;
  background: var(--hairline);
}
.work-apt-pip.filled{
  background: linear-gradient(90deg, var(--accent), #d7a9ff);
  animation: rune-pulse 2.2s ease-in-out infinite;
}

.link-pal-details{
	color: var(--text);
	text-decoration: none;
}
.link-pal-details:hover{
	color: var(--text-bright);
	text-decoration: underline;
}

/* Botão com a identidade visual do site (mesmos tokens de accent usados
   em .error-btn-primary) -- pra links de ação que precisam de mais
   destaque que .link-pal-details (um texto simples). */
.btn-accent-outline{
	display:inline-flex;
	align-items:center;
	gap:.45rem;
	border-radius: 8px;
	padding: .5rem 1.1rem;
	font-size:.85rem;
	font-weight:600;
	text-decoration:none;
	background: var(--accent-soft);
	border:1px solid var(--accent-line);
	color: var(--accent);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-accent-outline:hover{
	background: var(--accent);
	color:#0a0d14;
}

/* ESTILIZAÇÃO DO ÍCONE COM O NOME DO PAL NAS TAGS DO PADRÃO <characterName id=|IDdoPal|/> */
.pal-mention-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius: 20px;
  padding: .3rem .8rem .3rem .35rem;
  text-decoration:none;
  font-size:.85rem;
  transition: border-color .15s ease, background .15s ease;
}
.pal-mention-link:hover{
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.pal-mention-avatar{
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hairline);
}
.pal-mention-icon{
  width: 1em;
  height: 1em;
  object-fit: contain;
}
.pal-mention-name{
  color: var(--text-bright);
  font-weight:600;
}
.pal-mention-external{
  font-size:.7rem;
  color: var(--text-dim);
}
.pal-mention-link:hover .pal-mention-external{
  color: var(--accent);
}

.tl-chevron-right{
	position:absolute;
	right:15px;
}

/*=========================================================
   BASE DAS BADGES DE RARIDADE PARA HABILIDADES PASSIVAS
===========================================================*/
.skill-badge {
    --accent: #9eb4c0;
    --text: #d6e5ee;
    --bg: #08131b;
    --glow: rgba(158,180,192,.15);
    --icon-url: url("/assets/img/pals_data/Main_Menu/T_icon_plus.png");

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;

    min-width: 280px;
    height: 42px;

    padding: 8px 12px;

    overflow: hidden;

    border: 3px solid var(--accent);
    border-left-width: 6px;

    background: var(--bg);

    color: var(--text);

    font-family: "Trebuchet MS", sans-serif;
    font-size: 1.2rem;
    line-height: 1;

    text-shadow:
        0 0 4px currentColor;

    box-shadow:
        0 0 8px var(--glow),
        inset 0 0 12px rgba(255,255,255,.05);
}

.skill-badge__name {
    position: relative;
    z-index: 2;
}

.skill-badge__icon {
    width: 24px;
    height: 24px;

    margin-left: auto;
    flex-shrink: 0;

    background-color: var(--accent);

    mask-image: var(--icon-url);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    -webkit-mask-image: var(--icon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    filter:
        drop-shadow(0 0 4px var(--accent));

    z-index: 2;
}

.skill-badge::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            transparent 35%
        );

    pointer-events: none;
}


.skill-badge--common, .skill-badge--uncommon {
    --accent: #a8bac6;
    --text: #d8e5ee;

    --bg:
        linear-gradient(
            90deg,
            #08131b,
            #0a1821,
            #071119
        );

    --glow: rgba(168,186,198,.15);
}

.skill-badge--negative {
    --accent: #ff3535;
    --text: #d7dce0;

    --bg:
        linear-gradient(
            90deg,
            #08131b,
            #08161d,
            #071119
        );

    --glow: rgba(255,53,53,.25);
}


.skill-badge--legendary {
    --accent: #f0d400;
    --text: #f5d633;

    --bg:
        linear-gradient(
            90deg,
            #171a08,
            #282d0d,
            #121507
        );

    --glow: rgba(240,212,0,.35);
}


.skill-badge--rainbow {
    --accent: #53ffe0;
    --text: #4fffd8;

    --bg:
        linear-gradient(
            90deg,
            #10373c 0%,
            #0e5961 20%,
            #1d6986 45%,
            #3551a4 70%,
            #6348bf 100%
        );

    --glow: rgba(83,255,224,.45);
}


.skill-badge--world-tree {
    --accent: #49f7ea;
    --text: #66ffd2;

    --bg:
        linear-gradient(
            90deg,
            #281453 0%,
            #5423ae 50%,
            #7a38ff 100%
        );

    --glow: rgba(73,247,234,.65);
}


.skill-badge--negative {
    --icon-url: url("/assets/img/pals_data/Main_Menu/T_icon_skillstatus_rank_arrow_00.png");
}
.skill-badge--common {
    --icon-url: url("/assets/img/pals_data/Main_Menu/T_icon_skillstatus_rank_arrow_01.png");
}
.skill-badge--uncommon {
    --icon-url: url("/assets/img/pals_data/Main_Menu/T_icon_skillstatus_rank_arrow_02.png");
}
.skill-badge--legendary {
    --icon-url: url("/assets/img/pals_data/Main_Menu/T_icon_skillstatus_rank_arrow_03.png");
}
.skill-badge--rainbow {
    --icon-url: url("/assets/img/pals_data/Main_Menu/T_icon_skillstatus_rank_arrow_04.png");
}
.skill-badge--world-tree {
    --icon-url: url("/assets/img/pals_data/Main_Menu/T_icon_skillstatus_rank_arrow_05.png");
}

.tl-w-70 {
	width: 70px;
}


/* CAIXA DE TEXTO DESTACADO */
.inline-code{
  font-family: var(--font-mono);
  font-size: 1em;
  color: var(--text-bright);
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: .15em .45em;
  white-space: nowrap;
}
.inline-code-bright{
  font-family: var(--font-mono);
  font-size: 1em;
  color: var(--accent);
  background: var(--panel-2);
  border: 1px solid var(--accent-line);
  border-radius: 5px;
  padding: .15em .45em;
  white-space: nowrap;
}

/* ÍCONES DE RANKS */
.rank {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;

    width: 2.15em;
    height: 2.15em;

    margin-left: 0.15em;
	margin-right: 0.35em;

    border-radius: 50%;
    font-style: normal;
    font-size: 1em;
    font-weight: 800;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.4),
        0 1px 4px rgba(0,0,0,.35);
}

/* Número principal */
.rank::before {
    color: inherit;
    font-size: 1.1em;
    line-height: 1;
    font-weight: 800;
}

/* Selo do R */
.rank::after {
    content: "R";

    position: absolute;
    top: -1em;
    left: -1em;

    width: 2em;
    height: 2em;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #0f172a;
    color: #ffffff;

    font-size: 0.7em;
    font-weight: 400;
    line-height: 1;

    border: 1px solid rgba(255,255,255,.45);

    box-shadow:
        0 1px 2px rgba(0,0,0,.5),
        inset 0 1px 1px rgba(255,255,255,.08);
}

/* Rank 1 - Prata Clara */
.rank-1 {
    background: linear-gradient(
        135deg,
        #F5F7FA 0%,
        #E7EBF0 35%,
        #D7DEE7 70%,
        #C8D0D9 100%
    );

    color: #241B10;
}

.rank-1::before {
    content: "1";
}
.rank-1::after {
    border-color: rgba(200, 208, 217, 0.8);
}

/* Rank 2 - Prata */
.rank-2 {
    background: linear-gradient(
        135deg,
        #E7EBF0 0%,
        #D7DEE7 35%,
        #C8D0D9 70%,
        #B8C1CB 100%
    );

    color: #241B10;
}

.rank-2::before {
    content: "2";
}
.rank-2::after {
    border-color: rgba(184, 193, 203, 0.8);
}

/* Rank 3 - Bronze */
.rank-3 {
    background: linear-gradient(
        135deg,
        #E7DEC0 0%,
        #DCCFA2 35%,
        #D4C28A 70%,
        #C7B98A 100%
    );

    color: #241B10;
}

.rank-3::before {
    content: "3";
}
.rank-3::after {
    border-color: rgba(199, 185, 138, 0.8);
}

/* Rank 4 - Ouro */
.rank-4 {
    background: linear-gradient(
        135deg,
        #F7E29A 0%,
        #F1D36F 35%,
        #E9C85A 70%,
        #DDBA48 100%
    );

    color: #241B10;
}

.rank-4::before {
    content: "4";
}
.rank-4::after {
    border-color: rgba(221, 186, 72, 0.8);
}

/* Rank 5 - Ouro Máximo */
.rank-5 {
    background: linear-gradient(
        135deg,
        #FFF3B0 0%,
        #F7DE72 25%,
        #F1D36F 50%,
        #E3BB43 75%,
        #D4A728 100%
    );

    color: #241B10;

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,.85),
        0 0 8px rgba(255,215,90,.45),
        0 0 18px rgba(212,167,40,.30);
}

.rank-5::before {
    content: "5";
}

.rank-5::after {
    border-color: rgba(212, 167, 40, 0.8);
}

.text-negative {
	color: var(--text-red-bright);
}
.text-positive {
	color: var(--text-green-bright);
}

.add-status-icon{
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--hairline);
	pointer-events: none;
}
.pointer-none, .p-none{
	pointer-events: none;
}
.main-logo{
	max-height:50px;
}
.main-logo-24{
	max-height:24px;
}
.main-logo-32{
	max-height:32px;
}
.main-logo-48{
	max-height:48px;
}
.main-logo-60{
	max-height:60px;
}
.main-logo-64{
	max-height:64px;
}
.main-logo-80{
	max-height:80px;
}
.main-logo-90{
	max-height:90px;
}
.main-logo-100{
	max-height:100px;
}
.main-logo-128{
	max-height:128px;
}
.main-logo-150{
	max-height:150px;
}
.main-logo-160{
	max-height:160px;
}
.main-logo-180{
	max-height:180px;
}
.main-logo-200{
	max-height:200px;
}
.main-logo-220{
	max-height:220px;
}
.main-logo-250{
	max-height:250px;
}
.main-logo-256{
	max-height:256px;
}
.main-logo-512{
	max-height:512px;
}
.main-logo-640{
	max-height:640px;
}
.main-logo-720{
	max-height:720px;
}
.main-logo-800{
	max-height:800px;
}
.main-logo-900{
	max-height:900px;
}
.main-logo-1000{
	max-height:1000px;
}
.main-logo-1080{
	max-height:1080px;
}
.main-logo-1440{
	max-height:1440px;
}
.main-logo-1920{
	max-height:1920px;
}
.main-logo-2048{
	max-height:2048px;
}
[class^="main-logo"] {
    pointer-events: none;
}
.text-main-codex-upper {
	color: #FFFFFF;
	text-shadow: #FFF 0px 0px 5px, #FF2D95 0px 0px 20px, #FF2D95 0px 0px 30px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px, 0px 0px 20px rgba(255,255,255,0);
}

.hero-card-art{
  display: block;
  margin-inline: auto; /* equivalente a margin-left:auto + margin-right:auto */
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--hairline);
}

@media (min-width: 768px){
  .hero-card-art{
    width: 220px;
    height: 100%;
    min-height: 320px;
  }
}
.pal-warning-card{
  display: block;
  width: 100%;
  height: auto;           /* altura acompanha a largura, respeitando a proporção real da imagem */
  object-fit: contain;    /* nunca corta — se sobrar espaço, sobra, mas nada é cortado */
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--panel); /* preenche o espaço "sobrando" com a cor do tema, em vez de deixar transparente/branco */
}
@media (min-width: 768px){
	.pal-warning-card{
		max-width: 220px;
	}
}

/* HTML: <div class="CLASSE"></div> */
.loader-progress-bar {
  height: 4px;
  width: 130px;
  --c:no-repeat linear-gradient(#6100ee 0 0);
  background: var(--c),var(--c),#d7b8fc;
  background-size: 60% 100%;
  animation: l16 3s infinite;
}
@keyframes l16 {
  0%   {background-position:-150% 0,-150% 0}
  66%  {background-position: 250% 0,-150% 0}
  100% {background-position: 250% 0, 250% 0}
}
.loader-pac-man {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side,#000 98%,#0000) 55% 20%/8px 8px no-repeat,  
    #ffcc00;
  box-shadow: 2px -6px 12px 0px inset rgba(0, 0, 0, 0.7);
  animation: l4 .5s infinite steps(5) alternate;
}
@keyframes l4{ 
    0% {clip-path: polygon(50% 50%,100%   0,100% 0,0 0,0 100%,100% 100%,100% 100%)}
  100% {clip-path: polygon(50% 50%,100% 65%,100% 0,0 0,0 100%,100% 100%,100%  35%)}
}
.loader-box-sides {
  --s: 25px;
  
  --_d: calc(0.353*var(--s));
  width: calc(var(--s) + var(--_d));
  aspect-ratio: 1;
  display: flex;
}
.loader-box-sides:before,
.loader-box-sides:after {
  content: "";
  flex: 1;
  clip-path: polygon(var(--_d) 0,100% 0,100% calc(100% - var(--_d)),calc(100% - var(--_d)) 100%,0 100%,0 var(--_d));
  background:
    conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d),
     #fff 135deg,#666 0 270deg,#aaa 0);
  animation: l5 1.2s infinite;
}
.loader-box-sides:before {
  margin-right: calc(var(--_d)/-2 - 1px);
}
.loader-box-sides:after {
  margin-left: calc(var(--_d)/-2 - 1px);
  animation-delay: 0.6s
}
@keyframes l5{
  0%     {transform: translateY(0)}
  16.67% {transform: translateY(-10px)}
  33.33% {transform: translateY(10px)}
  50%,
  100%   {transform: translateY(0)}
}
.loader-link {
  width: 60px;
  height: 30px;
  display: grid;
}
.loader-link:before,
.loader-link:after {
  content: "";
  grid-area: 1/1;
  --c:no-repeat linear-gradient(#046D8B 0 0);
  background: var(--c), var(--c), var(--c);
  animation: l14-1 1s infinite linear, l14-2 1s infinite linear;
}
.loader-link:after {
  transform: scale(-1);
}
@keyframes l14-1 {
  0%,
  3%    {background-size: 0               4px,4px 0   ,0               4px}
  16.67%{background-size: calc(50% - 6px) 4px,4px 0   ,0               4px}
  33.33%{background-size: calc(50% - 6px) 4px,4px 14px,0               4px}
  46%,
  54%   {background-size: calc(50% - 6px) 4px,4px 14px,calc(50% + 6px) 4px}
  66.67%{background-size: 0               4px,4px 14px,calc(50% + 6px) 4px}
  83.33%{background-size: 0               4px,4px 0   ,calc(50% + 6px) 4px}
  96%,
  100%  {background-size: 0               4px,4px 0   ,0               4px}
}
@keyframes l14-2 {
  0%,49.9%{background-position:0              50%,left calc(50% - 6px) bottom 13px,left  24px top 3px}
  50%,100%{background-position:right 36px top 50%,left calc(50% - 6px) top     3px,right 0    top 3px}
}
.loader-maze-1 {
  width: 70px;
  aspect-ratio: 2;
  background:
    radial-gradient(farthest-side,#000 90%,#0000) 0 0/8px 8px,
    linear-gradient(#fff 0 0) 100% 0/30px 10px,
    linear-gradient(#fff 0 0) 0 100%/30px 10px,
    repeating-linear-gradient(90deg,#fff 0 10px,#0000 0 30px);
  background-repeat: no-repeat;
  animation: l6 2s infinite;
}
@keyframes l6 {
  0%    {background-position:left 1px bottom 1px,100% 0,0 100%,0 0}
  12.5% {background-position:left 50% bottom 1px,100% 0,0 100%,0 0}
  25%   {background-position:left 50% top 1px,100% 0,0 100%,0 0}
  37.5% {background-position:right 1px top 1px,100% 0,0 100%,0 0}
  50%   {background-position:right 1px bottom 1px,0 0,100% 100%,0 0}
  62.5% {background-position:right 50% bottom 1px,0 0,100% 100%,0 0}
  75%   {background-position:right 50% top 1px,0 0,100% 100%,0 0}
  87.5% {background-position:left 1px top 1px,0 0,100% 100%,0 0}
  100%  {background-position:left 1px bottom 1px,100% 0,0 100%,0 0}
}
.loader-infinite-progress {
  height: 4px;
  width: 130px;
  --c:no-repeat linear-gradient(#6100ee 0 0);
  background: var(--c),var(--c),#d7b8fc;
  background-size: 60% 100%;
  animation: l16 3s infinite;
}
@keyframes l16 {
  0%   {background-position:-150% 0,-150% 0}
  66%  {background-position: 250% 0,-150% 0}
  100% {background-position: 250% 0, 250% 0}
}
.accordion-transparent {
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
	border: none;
}

.text-dim{
	color: var(--text-dim);
}

.pfb-border{
	border:1px solid var(--hairline);
	border-radius: 12px;
}
.pfb-border.border-bottom{
	border-left:none;
	border-right:none;
	border-top:none;
	border-bottom:1px solid var(--hairline);
}
img{
	pointer-events: none;
}

.texto-ametista {
	color: var(--accent);
	font-weight:900;
}
.texto-armzaenamento-dimensional{
	color:#4fffd8;
}
.texto-palbox{
	color:#97a79d;
}
.texto-frehdship-bar{
	font-size:0.7rem;
}