/* ===========================================================================
   THURIAN ONLINE — tema
   ---------------------------------------------------------------------------
   Direcao: RPG premium. O que faz um site de servidor parecer caro nao e
   minimalismo — e ORNAMENTO e DENSIDADE: arte de fundo visivel, moldura com
   canto trabalhado, fio de ouro, textura, e conteudo enchendo a tela.

   ARMADILHA QUE JA CUSTOU DUAS VERSOES: basic_d.css:4 tem
   `body { background-color: #051122 }` OPACO, e ele carrega antes deste
   arquivo. Sem o reset abaixo, esse azul chapado pinta por cima da arte e o
   site inteiro vira um retangulo escuro morto. Nao remover.

   PARTE 1  chrome e componentes novos.
   PARTE 2  re-skin do markup legado (TableContainer, Caption*, BigButton),
            que veste as ~145 views antigas sem reescrever nenhuma. Elementos
            legados trazem background-image INLINE: ali o !important e a unica
            forma de vencer o atributo style.
   =========================================================================== */

@import url('./fonts.css');

/* ---------------------------------------------------------------- tokens  */
:root {
  --ground:      #0B1013;
  --ground-deep: #060A0C;

  --panel:       rgba(17, 24, 27, .88);
  --panel-2:     rgba(26, 36, 40, .94);

  /* ouro estrutural: moldura, canto, filete. Nao e o mesmo papel da brasa,
     que fica reservada para acao e destaque. */
  --gold:        #C9A961;
  --gold-soft:   #E3C98C;
  --gold-dim:    #7E6634;
  --gold-line:   rgba(201, 169, 97, .34);

  --edge:        rgba(201, 169, 97, .16);
  --edge-strong: rgba(201, 169, 97, .38);

  --ink:      #E7EDEB;
  --ink-dim:  #B3C0BD;
  --muted:    #7F8E8C;

  --ember:      #E0702A;
  --ember-soft: #F49A5E;
  --ember-lo:   #A24A17;
  --ember-glow: rgba(224, 112, 42, .4);

  --rune:    #8FC3B9;
  --online:  #5CCB77;
  --danger:  #D2544A;
  --warn:    #E0B255;

  --f-display: 'Marcellus SC', 'Cinzel', Georgia, serif;
  --f-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --r:    4px;    /* raio pequeno: moldura de metal nao e pilula */
  --u:    8px;
  --shell: 1300px;

  --deep:  0 14px 40px rgba(0, 0, 0, .6);
  --lift:  0 6px 22px rgba(0, 0, 0, .5);

  /* Canto ornamental. Quatro variantes porque background-image nao rotaciona. */
  --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M1 13V1h12' fill='none' stroke='%23C9A961' stroke-width='1.4'/%3E%3Cpath d='M5 5h5M5 5v5' fill='none' stroke='%23C9A961' stroke-width='1' opacity='.55'/%3E%3Cpath d='M1 1l3 3-3 3z' fill='%23C9A961' opacity='.8'/%3E%3C/svg%3E");
  --corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M19 13V1H7' fill='none' stroke='%23C9A961' stroke-width='1.4'/%3E%3Cpath d='M15 5h-5M15 5v5' fill='none' stroke='%23C9A961' stroke-width='1' opacity='.55'/%3E%3Cpath d='M19 1l-3 3 3 3z' fill='%23C9A961' opacity='.8'/%3E%3C/svg%3E");
  --corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M1 7v12h12' fill='none' stroke='%23C9A961' stroke-width='1.4'/%3E%3Cpath d='M5 15h5M5 15v-5' fill='none' stroke='%23C9A961' stroke-width='1' opacity='.55'/%3E%3Cpath d='M1 19l3-3-3-3z' fill='%23C9A961' opacity='.8'/%3E%3C/svg%3E");
  --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M19 7v12H7' fill='none' stroke='%23C9A961' stroke-width='1.4'/%3E%3Cpath d='M15 15h-5M15 15v-5' fill='none' stroke='%23C9A961' stroke-width='1' opacity='.55'/%3E%3Cpath d='M19 19l-3-3 3-3z' fill='%23C9A961' opacity='.8'/%3E%3C/svg%3E");

  /* Grao. Tira o aspecto de bloco de cor chapada sem custar imagem. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--ground-deep); }

/* >>> O reset que a versao anterior nao tinha. Ver comentario do topo. <<< */
body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  margin: 0;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
}

/* --------------------------------------------------- camadas do fundo ---- */
.th-bg {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: var(--ground-deep) url('/assets/tibiarl/images/header/background-artwork_ai.jpg') center top / cover no-repeat;
}
.th-veil {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(224,112,42,.14), transparent 62%),
    linear-gradient(180deg, rgba(6,10,12,.42) 0%, rgba(6,10,12,.66) 42%, rgba(6,10,12,.9) 100%),
    radial-gradient(115% 85% at 50% 42%, transparent 26%, rgba(0,0,0,.78) 100%);
}
.th-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain);
  opacity: .05;
  mix-blend-mode: overlay;
}

a { color: var(--rune); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--gold-soft); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* ===========================================================================
   MOLDURA — o componente que carrega o visual do site inteiro
   Fio de ouro fino por fora, sombra funda, filete claro por dentro, e os
   quatro cantos ornamentais desenhados como background.
   =========================================================================== */
.th-frame {
  position: relative;
  background:
    linear-gradient(180deg, rgba(38, 50, 55, .90), rgba(13, 19, 22, .93));
  border: 1px solid var(--edge);
  border-radius: var(--r);
  box-shadow:
    var(--deep),
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* cantos: uma camada so, quatro imagens ancoradas */
.th-frame::before {
  content: '';
  position: absolute; inset: 3px;
  pointer-events: none;
  background-image: var(--corner-tl), var(--corner-tr), var(--corner-bl), var(--corner-br);
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
  opacity: .75;
}

/* ===========================================================================
   PARTE 1 — chrome
   =========================================================================== */

.th-shell { max-width: var(--shell); margin: 0 auto; padding: 0 calc(var(--u)*2); }

/* ------------------------------------------------------------- masthead  */
.th-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--u)*3); flex-wrap: wrap;
  padding: calc(var(--u)*2.5) calc(var(--u)*4);
  margin: calc(var(--u)*2.5) 0 calc(var(--u)*2);
  overflow: hidden;
}
/* A arte entra tambem no masthead, so que fraca e presa a direita: a faixa
   deixa de ser um retangulo de cor e passa a ter profundidade. */
.th-top::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,16,19,.97) 30%, rgba(11,16,19,.55) 68%, rgba(11,16,19,.82) 100%),
    url('/assets/tibiarl/images/header/background-artwork_ai.jpg') right 38% / cover no-repeat;
  opacity: .85;
}
.th-top::after {
  content: '';
  position: absolute; left: 6%; right: 6%; bottom: -1px; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .6;
}
.th-top > * { position: relative; z-index: 1; }

.th-brand { display: flex; align-items: center; gap: calc(var(--u)*2.5); }
/* ------------------------------------------------------------- monograma */
/* Placa de metal com a letra em relevo. Tres coisas fazem a diferenca entre
   isso e um "quadrado escuro com uma letra": (1) a moldura e GROSSA e tem
   varias faixas de luz no gradiente, que e o que le como metal polido; (2) o
   campo tem vinheta, nao cor chapada; (3) a letra e desenhada DUAS vezes —
   atras o contorno escuro com sombra, na frente a face prateada — porque
   letra sem contorno fica pintada na superficie em vez de saliente. */
.th-mono {
  /* `display` explicito: sem ele o elemento e inline por padrao e largura e
     altura sao IGNORADAS fora de um container flex. No topo do site funcionava
     por acidente (e item de .th-brand, que e flex); dentro de um <a> comum,
     como na caixa de download, o ladrilho saia distorcido. */
  display: inline-grid;
  width: 84px; height: 84px; flex: 0 0 84px;
  padding: 7px; border-radius: 23px;
  background: linear-gradient(147deg,
    #FFFFFF 0%, #D6E2E9 8%, #97A7B1 22%, #56636C 38%,
    #3A464E 48%, #8E9EA8 58%, #E2EDF3 70%, #98A8B2 84%, #4B5860 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .9),
    0 10px 26px rgba(0, 0, 0, .8),
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 -1px 0 rgba(0, 0, 0, .5);
}
.th-mono .in {
  width: 100%; height: 100%; border-radius: 16px;
  display: grid; place-items: center; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 34%, #2C3D48 0%, #142028 50%, #060B0F 100%);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .95),
    inset 0 0 0 1px rgba(255, 255, 255, .07);
}
/* luz de tocha: o unico calor do monograma */
.th-mono .in::before {
  content: ''; position: absolute; left: 50%; top: 60%;
  width: 84px; height: 78px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(224,112,42,.26), transparent 66%);
}

/* A LETRA — uma camada so.
   A versao de duas camadas (contorno atras + face na frente) falhou: com
   -webkit-text-stroke grosso o contorno preto comia a face e a letra saia
   PRETA com borda prateada, o oposto do que a referencia mostra. Aqui a face
   e prata de verdade e o contorno vem de drop-shadow empilhado — que desenha
   a borda escura por fora sem invadir o interior do traco. */
.th-mono i {
  position: relative;
  font-family: 'UnifrakturCook', 'UnifrakturMaguntia', var(--f-display);
  font-style: normal; font-weight: 700;
  font-size: 88px; line-height: .72;
  background: linear-gradient(168deg,
    #FFFFFF 0%, #F0F6FA 10%, #C2D0DA 24%, #8B9CA8 38%,
    #61707B 48%, #97A8B3 58%, #DCE8EF 72%, #AEBDC7 86%, #778691 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #D6E2E9;
  /* 1-2: borda escura fina  ·  3: relevo  ·  4: sombra projetada */
  filter:
    drop-shadow(0 0 1px rgba(3, 7, 10, .95))
    drop-shadow(0 0 2px rgba(3, 7, 10, .8))
    drop-shadow(0 1px 0 rgba(0, 0, 0, .9))
    drop-shadow(0 3px 5px rgba(0, 0, 0, .8));
  transform: scaleX(1.04) translateY(2px);
}
/* variante grande, usada como icone do cliente na pagina de download */
.th-mono.big {
  width: 106px; height: 106px; flex-basis: 106px;
  border-radius: 28px; padding: 8px;
  display: inline-grid; vertical-align: middle;
}
.th-mono.big .in { border-radius: 21px; }
.th-mono.big i { font-size: 112px; }
.th-mono.big .in::before { width: 106px; height: 98px; }
.th-word b {
  display: block; font-family: var(--f-display); font-weight: 400; font-size: 40px;
  letter-spacing: .1em; line-height: 1;
  background: linear-gradient(180deg, #FFF9EA 6%, #E5CB91 34%, var(--gold) 58%, #8B6E33 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.85));
}
/* filete com a palavra no meio, o velho truque de cabecalho de jornal */
.th-word .rule {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .5em;
  color: var(--ember); text-transform: uppercase; text-indent: .5em;
}
.th-word .rule i { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.th-word .rule i:last-child { background: linear-gradient(90deg, var(--gold-line), transparent); }
.th-word .sub {
  display: block; margin-top: 7px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}

.th-top-right { display: flex; align-items: center; gap: calc(var(--u)*2); flex-wrap: wrap; }

.th-online {
  font-family: var(--f-mono); font-size: 12px;
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.th-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  background: var(--online); box-shadow: 0 0 9px var(--online);
}
.th-dot.off { background: var(--danger); box-shadow: 0 0 9px var(--danger); }

.th-lang { display: flex; gap: 4px; }
.th-lang a {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 3px;
  background: rgba(0,0,0,.35); border: 1px solid var(--edge); color: var(--muted);
}
.th-lang a.on {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-dim));
  color: #171104; border-color: var(--gold); box-shadow: 0 0 12px rgba(201,169,97,.3);
}
.th-lang a:hover { color: var(--gold-soft); border-color: var(--edge-strong); }
.th-lang a.on:hover { color: #171104; }

/* ---------------------------------------------------------------- botoes  */
.th-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border: 1px solid var(--ember-lo);
  font-family: var(--f-display); font-size: 13.5px; font-weight: 400;
  letter-spacing: .1em; line-height: 1.4;
  padding: 11px 24px; border-radius: 3px;
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 45%, var(--ember-lo) 100%);
  color: #1B0C03;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  box-shadow: 0 4px 18px rgba(224,112,42,.3), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.3);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.th-btn:hover { color: #1B0C03; filter: brightness(1.09); box-shadow: 0 6px 26px var(--ember-glow), inset 0 1px 0 rgba(255,255,255,.45); transform: translateY(-1px); }
.th-btn:active { transform: translateY(0); }
.th-btn.ghost {
  background: linear-gradient(180deg, rgba(60,74,80,.6), rgba(18,26,30,.7));
  color: var(--gold-soft); border-color: var(--edge-strong);
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 12px rgba(0,0,0,.4);
}
.th-btn.ghost:hover { color: #FFF6E2; border-color: var(--gold); filter: none; }
.th-btn.block { display: flex; width: 100%; }

/* ---------------------------------------------------- divisor ornamental  */
.th-div {
  display: flex; align-items: center; gap: 12px;
  margin: calc(var(--u)*3) 0;
}
.th-div::before, .th-div::after {
  content: ''; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.th-div i {
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--gold); box-shadow: 0 0 10px rgba(201,169,97,.5);
  flex: 0 0 7px;
}

/* ------------------------------------------------------------------ hero  */
.th-hero {
  position: relative;
  margin: 0 0 calc(var(--u)*2.5);
  padding: calc(var(--u)*8) calc(var(--u)*6);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--edge);
  box-shadow: var(--deep), inset 0 0 0 1px rgba(0,0,0,.5);
  /* a arte aparece DENTRO do hero, mais forte que no resto da pagina */
  background:
    linear-gradient(100deg, rgba(6,10,12,.94) 8%, rgba(6,10,12,.72) 44%, rgba(6,10,12,.30) 100%),
    url('/assets/tibiarl/images/header/background-artwork_ai.jpg') center 22% / cover no-repeat;
}
.th-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--ember), var(--gold), transparent);
  opacity: .85;
}
.th-hero-in { position: relative; z-index: 1; max-width: 640px; }
.th-hero .kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-soft);
  padding: 6px 14px; border-radius: 3px; margin: 0 0 calc(var(--u)*3);
  background: rgba(0,0,0,.5); border: 1px solid var(--edge-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.th-hero h1 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(32px, 5.4vw, 56px); line-height: 1.06; letter-spacing: .015em;
  margin: 0 0 calc(var(--u)*2.5); text-wrap: balance; color: #F5F1E6;
  text-shadow: 0 4px 30px rgba(0,0,0,.85), 0 0 60px rgba(0,0,0,.6);
}
.th-hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, var(--ember-soft), var(--ember));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px var(--ember-glow));
}
/* A lede e a frase-manifesto: maior, em display, e ela que carrega o tom. */
.th-hero .lede {
  font-family: var(--f-display); font-size: clamp(17px, 2vw, 22px);
  color: var(--gold-soft); max-width: 30ch; margin: 0 0 calc(var(--u)*2.5);
  letter-spacing: .02em; line-height: 1.35;
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
}
/* Os dois paragrafos do credo. O segundo puxa mais claro porque e o fecho. */
.th-hero .creed {
  color: var(--ink-dim); max-width: 50ch; margin: 0 0 calc(var(--u)*1.5);
  font-size: 14.5px; line-height: 1.6; text-shadow: 0 2px 12px rgba(0,0,0,.85);
}
.th-hero .creed.strong {
  color: var(--ink); border-left: 2px solid var(--gold);
  padding-left: calc(var(--u)*2); margin-bottom: calc(var(--u)*4);
}
.th-hero-cta { display: flex; gap: calc(var(--u)*1.5); flex-wrap: wrap; margin-bottom: calc(var(--u)*4.5); }

.th-rates { display: flex; flex-wrap: wrap; gap: var(--u); }
.th-rate {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(40,52,57,.8), rgba(10,16,19,.85));
  border: 1px solid var(--edge);
  font-family: var(--f-mono); font-size: 12px; color: var(--muted);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.4);
}
.th-rate i { color: var(--gold); font-size: 11px; }
.th-rate b { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------- colunas  */
.th-cols {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr) 276px;
  gap: calc(var(--u)*2);
  align-items: start;
  margin-bottom: calc(var(--u)*3);
}

/* ------------------------------------------------------------------- nav  */
.th-nav { display: flex; flex-direction: column; gap: calc(var(--u)*1.5); }

.th-navgroup { overflow: hidden; }
.th-navgroup > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-size: 14px; letter-spacing: .11em;
  color: var(--gold-soft);
  background: linear-gradient(180deg, rgba(201,169,97,.10), rgba(0,0,0,.12));
  border-bottom: 1px solid transparent;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.th-navgroup > summary::-webkit-details-marker { display: none; }
.th-navgroup[open] > summary { border-bottom-color: var(--edge); }
.th-navgroup > summary:hover { color: #FFF6E2; }
.th-navgroup > summary .lamp {
  width: 7px; height: 7px; border-radius: 50%; background: var(--online);
  box-shadow: 0 0 8px var(--online); flex: 0 0 7px;
}
.th-navgroup > summary .chev { margin-left: auto; color: var(--gold-dim); font-size: 11px; transition: transform .2s ease; }
.th-navgroup[open] > summary .chev { transform: rotate(180deg); }

.th-navgroup a {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 16px; font-size: 13.5px; color: var(--ink-dim);
  border-left: 2px solid transparent;
}
.th-navgroup a i { width: 15px; text-align: center; font-size: 12px; color: var(--gold-dim); flex: 0 0 15px; }
.th-navgroup a:hover, .th-navgroup a.on {
  color: #FFF6E2; border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(201,169,97,.14), transparent);
}
.th-navgroup a:hover i, .th-navgroup a.on i { color: var(--gold-soft); }
.th-navgroup .pad { padding: 4px 0 10px; }

.th-navtoggle { display: none; }

/* ----------------------------------------------------------------- main   */
.th-main { padding: calc(var(--u)*4); min-width: 0; }

/* ------------------------------------------------------------------ rail  */
.th-rail { display: flex; flex-direction: column; gap: calc(var(--u)*2); }

/* ------------------------------------------------------------------ box   */
.th-box { overflow: hidden; }
.th-box-h {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-size: 13px; letter-spacing: .12em;
  color: var(--gold-soft); padding: 12px 16px;
  background: linear-gradient(180deg, rgba(201,169,97,.13), rgba(0,0,0,.15));
  border-bottom: 1px solid var(--edge);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.th-box-h .lamp {
  width: 7px; height: 7px; border-radius: 50%; background: var(--online);
  box-shadow: 0 0 8px var(--online); flex: 0 0 7px;
}
.th-box-h > span {
  margin-left: auto; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .06em; color: var(--muted);
}
.th-box-b { padding: 16px; font-size: 13.5px; }
.th-box-b > :first-child { margin-top: 0; }
.th-box-b > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- ranking  */
.th-rank { display: flex; flex-direction: column; gap: 8px; }
.th-rank-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.26));
  border: 1px solid rgba(201,169,97,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.th-rank-row:hover {
  border-color: var(--edge-strong); transform: translateX(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.4);
}
.th-rank-row .pos {
  font-family: var(--f-mono); font-size: 11px; color: var(--gold-dim);
  width: 12px; flex: 0 0 12px; text-align: center;
}
/* Sprite SEM moldura: o quadro fechava demais e brigava com o cartao da linha.
   No lugar, um halo radial que so aterra a figura, e sombra projetada no proprio
   boneco — ele parece pousado sobre a linha em vez de preso numa caixa. */
/* O gerador devolve 64x64 mas desenha o boneco SO no quadrante inferior-direito
   (medido: x 33..63, y 32..63) — os outros tres quartos sao transparentes. Por
   isso ele nascia empurrado para baixo e para a direita.
   A correcao: exibir a imagem em 2x (128px) e ancora-la pelo centro do BONECO,
   que fica a 75% da imagem, e nao pelo centro da imagem. Assim ele fica
   centrado de verdade na linha e sai com o dobro do tamanho. */
.th-rank-row .sprite {
  width: 54px; height: 54px; flex: 0 0 54px;
  position: relative;
  background: radial-gradient(ellipse 58% 40% at 50% 74%, rgba(201,169,97,.22), transparent 70%);
  border: 0;
}
.th-rank-row .sprite img {
  position: absolute; left: 50%; top: 50%;
  width: 108px; height: 108px; max-height: none; max-width: none;
  /* 75% de 108 = 81: puxa o centro do boneco para o centro da caixa */
  margin-left: -81px; margin-top: -81px;
  image-rendering: pixelated;
  pointer-events: none;   /* a area transparente nao rouba o clique da linha */
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.8));
  transition: transform .18s ease;
}
.th-rank-row:hover .sprite img { transform: scale(1.07); }
.th-rank-row .who { flex: 1; min-width: 0; }
.th-rank-row .who b {
  display: block; font-family: var(--f-display); font-size: 13.5px; font-weight: 400;
  letter-spacing: .02em; color: var(--gold-soft);
  /* Nome INTEIRO: antes tinha ellipsis e "Luis Pedro Silva" virava "Luis Pe...".
     Numa coluna estreita a saida e quebrar em duas linhas, nao cortar — nome de
     personagem e identidade, meio nome nao serve para nada. */
  white-space: normal; overflow: visible; text-overflow: clip;
  line-height: 1.18; overflow-wrap: anywhere;
}
.th-rank-row:hover .who b { color: #FFF6E2; }
.th-rank-row .who span { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }

/* Medalha de nivel: "LVL" pequeno em cima do numero, como no modelo. */
.th-lvl {
  font-family: var(--f-mono); font-size: 15px; font-weight: 500;
  color: #1B1405;
  background: linear-gradient(180deg, #F2DFA8 0%, var(--gold) 45%, #8A6E33 100%);
  border: 1px solid var(--gold); border-radius: var(--r-sm, 5px);
  padding: 5px 11px 6px; font-variant-numeric: tabular-nums; line-height: 1;
  text-align: center; flex: 0 0 auto; min-width: 46px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 9px rgba(0,0,0,.45);
}
.th-lvl small {
  display: block; font-size: 8px; letter-spacing: .16em; opacity: .65;
  margin-bottom: 2px; font-weight: 600;
}

/* ------------------------------------------------ podio: 1o, 2o e 3o -----
   Ouro, prata e bronze. O primeiro troca o numero por uma coroa: com so tres
   cores o olho leva um instante para ordenar, com a coroa o topo e imediato. */
.th-rank-row:nth-child(1) {
  border-color: rgba(230, 195, 105, .45);
  background: linear-gradient(180deg, rgba(230,195,105,.14), rgba(0,0,0,.3));
}
.th-rank-row:nth-child(1) .pos { font-size: 0; }          /* esconde o "1" */
.th-rank-row:nth-child(1) .pos::before {
  content: '\f521';                                        /* coroa */
  font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 13px;
  color: #F0CE6B; text-shadow: 0 0 10px rgba(240,206,107,.6);
}
/* halo mais quente no primeiro, ja que nao ha mais moldura para diferenciar */
.th-rank-row:nth-child(1) .sprite {
  background: radial-gradient(ellipse 62% 44% at 50% 76%, rgba(240,206,107,.34), transparent 70%);
}
.th-rank-row:nth-child(1) .who b { color: #F5DC94; }

.th-rank-row:nth-child(2) {
  border-color: rgba(200, 210, 216, .32);
  background: linear-gradient(180deg, rgba(200,210,216,.10), rgba(0,0,0,.3));
}
.th-rank-row:nth-child(2) .pos { color: #CBD7DE; }
.th-rank-row:nth-child(2) .who b { color: #DCE7EE; }
.th-rank-row:nth-child(2) .th-lvl {
  background: linear-gradient(180deg, #F0F5F8 0%, #B4C2CB 45%, #6E7B84 100%);
  border-color: #C3D0D8;
}

.th-rank-row:nth-child(3) {
  border-color: rgba(205, 127, 50, .32);
  background: linear-gradient(180deg, rgba(205,127,50,.11), rgba(0,0,0,.3));
}
.th-rank-row:nth-child(3) .pos { color: #D69B62; }
.th-rank-row:nth-child(3) .who b { color: #E8B183; }
.th-rank-row:nth-child(3) .th-lvl {
  background: linear-gradient(180deg, #F0C29A 0%, #CD7F32 45%, #7A4A1C 100%);
  border-color: #D69B62;
}

/* --------------------------------------------------------------- relogio  */
.th-clock {
  font-family: var(--f-mono); font-size: 28px; letter-spacing: .08em;
  color: var(--online); text-shadow: 0 0 20px rgba(92,203,119,.45);
  text-align: center; font-variant-numeric: tabular-nums; padding: 8px 0 4px;
}
.th-clock.ember { color: var(--ember-soft); text-shadow: 0 0 20px var(--ember-glow); }
.th-clock + p {
  text-align: center; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}

/* ------------------------------------------------------------- monstro do dia */
.th-boosted { display: flex; align-items: center; gap: 14px; }
/* Mesmo tratamento do ranking: sem caixa, so halo e sombra projetada. */
.th-boosted .sprite {
  width: 76px; height: 76px; flex: 0 0 76px;
  display: grid; place-items: center;
  background: radial-gradient(ellipse 60% 42% at 50% 76%, rgba(224,112,42,.28), transparent 70%);
  border: 0;
  overflow: visible;
}
.th-boosted .sprite img {
  max-height: 72px; width: auto; image-rendering: pixelated;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.8));
}
.th-boosted b {
  display: block; font-family: var(--f-display); font-size: 17px;
  color: var(--gold-soft); letter-spacing: .04em; line-height: 1.2;
}
.th-boost-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.th-boost-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-mono); font-size: 10.5px; padding: 4px 9px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(224,112,42,.22), rgba(224,112,42,.08));
  color: var(--ember-soft); border: 1px solid rgba(224,112,42,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* --------------------------------------------------------------- rodape   */
.th-foot {
  margin: 0 0 calc(var(--u)*4);
  padding: calc(var(--u)*3.5);
  font-family: var(--f-mono); font-size: 11.5px; color: var(--muted);
  display: flex; justify-content: space-between; gap: calc(var(--u)*2); flex-wrap: wrap;
}
.th-foot a { color: var(--muted); }
.th-foot a:hover { color: var(--gold-soft); }

/* ===========================================================================
   Paginas novas
   =========================================================================== */

.th-page-h { border-bottom: 1px solid var(--edge); padding-bottom: calc(var(--u)*3); margin-bottom: calc(var(--u)*3.5); }
.th-page-h .eyebrow {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ember); margin: 0 0 10px;
}
.th-page-h h1 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(28px, 3.8vw, 42px); letter-spacing: .02em; line-height: 1.12;
  margin: 0 0 14px; text-wrap: balance; color: #F5F1E6;
  text-shadow: 0 3px 22px rgba(0,0,0,.6);
}
.th-page-h p { color: var(--ink-dim); max-width: 64ch; margin: 0; }

.th-main h2 {
  font-family: var(--f-display); font-weight: 400; font-size: 23px;
  letter-spacing: .05em; color: var(--gold-soft);
  margin: calc(var(--u)*5) 0 calc(var(--u)*2.5);
  padding-bottom: 11px;
  border-bottom: 1px solid var(--gold-line);
  display: flex; align-items: center; gap: 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.th-main h2::before {
  content: ''; width: 8px; height: 8px; transform: rotate(45deg);
  background: var(--gold); box-shadow: 0 0 10px rgba(201,169,97,.55); flex: 0 0 8px;
}
.th-main h3 {
  font-family: var(--f-display); font-weight: 400; font-size: 18px;
  letter-spacing: .04em; margin: calc(var(--u)*3.5) 0 var(--u); color: var(--ink);
}
.th-main p { max-width: 70ch; margin: 0 0 calc(var(--u)*2); color: var(--ink-dim); }
.th-main ul, .th-main ol { max-width: 70ch; padding-left: calc(var(--u)*3); margin: 0 0 calc(var(--u)*2.5); color: var(--ink-dim); }
.th-main li { margin-bottom: 8px; }
.th-main li::marker { color: var(--gold-dim); }
.th-main b, .th-main strong { color: var(--ink); font-weight: 600; }
.th-main code {
  font-family: var(--f-mono); font-size: .88em; color: var(--gold-soft);
  background: rgba(201,169,97,.10); border: 1px solid var(--edge);
  padding: 1px 6px; border-radius: 3px;
}

/* grade de sistemas */
.th-sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: calc(var(--u)*1.75); }
.th-sys {
  display: block; padding: calc(var(--u)*2.5); position: relative;
  background: linear-gradient(180deg, rgba(42,55,60,.55), rgba(10,16,19,.72));
  border: 1px solid var(--edge); border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.4);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  overflow: hidden;
}
.th-sys::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.th-sys:hover {
  transform: translateY(-3px); border-color: var(--edge-strong);
  box-shadow: 0 12px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.09), 0 0 22px rgba(201,169,97,.12);
}
.th-sys i {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: 3px; font-size: 17px; color: var(--gold-soft);
  background: linear-gradient(180deg, rgba(201,169,97,.18), rgba(0,0,0,.25));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.th-sys b {
  display: block; font-family: var(--f-display); font-size: 17px; letter-spacing: .04em;
  margin-bottom: 7px; color: var(--gold-soft); font-weight: 400;
}
.th-sys span { font-size: 12.5px; color: var(--muted); line-height: 1.55; display: block; }

/* passos: como comecar */
.th-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: calc(var(--u)*1.75); }
.th-step {
  padding: calc(var(--u)*2.5); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(42,55,60,.5), rgba(10,16,19,.7));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.th-step .num {
  font-family: var(--f-display); font-size: 30px; line-height: 1;
  color: var(--gold-dim); display: block; margin-bottom: 10px;
}
.th-step b { display: block; font-family: var(--f-display); font-size: 16px; color: var(--gold-soft); margin-bottom: 6px; font-weight: 400; letter-spacing: .03em; }
.th-step span { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* faixa de numeros do servidor */
.th-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: calc(var(--u)*1.5); margin-bottom: calc(var(--u)*2); }
.th-stat {
  padding: calc(var(--u)*2.25) var(--u); text-align: center; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(201,169,97,.10), rgba(0,0,0,.28));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.th-stat b {
  display: block; font-family: var(--f-mono); font-size: 26px; font-weight: 500;
  color: var(--gold-soft); font-variant-numeric: tabular-nums; line-height: 1.1;
  text-shadow: 0 0 18px rgba(201,169,97,.35);
}
.th-stat span {
  display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); margin-top: 7px;
}

/* nota */
.th-note {
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(201,169,97,.12), rgba(201,169,97,.02));
  border-radius: 0 var(--r) var(--r) 0;
  padding: calc(var(--u)*2.25) calc(var(--u)*2.75); margin: 0 0 calc(var(--u)*3);
  font-size: 13.5px; color: var(--ink-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.th-note b { color: var(--ink); }
.th-note.warn { border-left-color: var(--warn); background: linear-gradient(90deg, rgba(224,178,85,.12), rgba(224,178,85,.02)); }

/* tabela propria */
.th-tbl-wrap {
  overflow-x: auto; margin: 0 0 calc(var(--u)*3);
  border: 1px solid var(--edge); border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
table.th-tbl { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.th-tbl th {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-dim); font-weight: 400; text-align: left;
  padding: 11px 15px; background: linear-gradient(180deg, rgba(201,169,97,.10), rgba(0,0,0,.2));
  border-bottom: 1px solid var(--edge); white-space: nowrap;
}
table.th-tbl td { padding: 11px 15px; border-bottom: 1px solid rgba(201,169,97,.09); vertical-align: top; color: var(--ink-dim); }
table.th-tbl tr:last-child td { border-bottom: 0; }
table.th-tbl tbody tr:hover td { background: rgba(201,169,97,.06); }
table.th-tbl td.n { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.th-tbl td b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------- grade de filtros ----- */
/* Rotulo em cima do campo e colunas que quebram sozinhas. `minmax(0, 1fr)` e
   o detalhe que importa: com `1fr` puro a coluna nunca encolhe abaixo do
   conteudo e o campo volta a furar a caixa em janela estreita. */
.th-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: calc(var(--u)*2);
  padding: calc(var(--u)*2.5);
}
.th-filters label { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.th-filters label > span {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-dim);
}
.th-filters input, .th-filters select { width: 100% !important; min-width: 0; }
.th-filters-actions {
  display: flex; gap: calc(var(--u)*1.5); flex-wrap: wrap;
  padding: 0 calc(var(--u)*2.5) calc(var(--u)*2.5);
}

/* etiquetas */
.th-tag {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px; display: inline-block;
  background: rgba(0,0,0,.3); border: 1px solid var(--edge); color: var(--muted);
}
.th-tag.ok  { color: var(--online); border-color: rgba(92,203,119,.35); }
.th-tag.hot { color: var(--ember-soft); border-color: rgba(224,112,42,.35); }
.th-tag.no  { color: var(--danger); border-color: rgba(210,84,74,.35); }

.th-r1 { color: var(--ink-dim); } .th-r2 { color: #7CBB7C; } .th-r3 { color: #6FA6DC; }
.th-r4 { color: #B389DB; }        .th-r5 { color: var(--ember-soft); }

/* ===========================================================================
   PARTE 2 — RE-SKIN DO MARKUP LEGADO
   =========================================================================== */

.CaptionEdgeLeftTop, .CaptionEdgeRightTop, .CaptionEdgeLeftBottom, .CaptionEdgeRightBottom,
.CaptionBorderTop, .CaptionBorderBottom, .CaptionVerticalLeft, .CaptionVerticalRight,
.BoxFrameHorizontal, .BoxFrameVerticalLeft, .BoxFrameVerticalRight,
.BoxFrameEdgeLeftTop, .BoxFrameEdgeRightTop, .BoxFrameEdgeLeftBottom, .BoxFrameEdgeRightBottom,
.CornerWrapper, .Corner-frame-edge, .TableScrollbarWrapper, .TableScrollbarContainer,
.Bottom, .Top, .box-bottom, .box-top {
  display: none !important;
}

.TableContainer, .SmallBox, .Box {
  /* basic_d.css poe `font-size: 1px` aqui — truque do skin antigo para colapsar
     celula vazia. Sem este reset, TODO texto dentro da caixa que nao declare o
     proprio tamanho sai com 1px, ou seja, invisivel: era o caso do paragrafo da
     tela de trocar senha, que virava dois riscos. Os espacadores das views tem
     `font-size:1px` INLINE e altura fixa, entao continuam colapsando certo. */
  font-size: 14px !important;
  background: linear-gradient(180deg, rgba(42,55,60,.42), rgba(10,16,19,.55)) !important;
  border: 1px solid var(--edge) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 22px rgba(0,0,0,.4) !important;
  margin-bottom: calc(var(--u)*3.5) !important;
  padding: 0 !important;
  overflow: hidden;
}

.CaptionContainer, .CaptionInnerContainer {
  background: none !important; background-image: none !important;
  height: auto !important; padding: 0 !important; margin: 0 !important;
}
.CaptionContainer .Text, .CaptionInnerContainer .Text {
  font-family: var(--f-display) !important; font-weight: 400 !important;
  font-size: 16px !important; letter-spacing: .07em !important;
  color: var(--gold-soft) !important; text-align: left !important;
  background: linear-gradient(180deg, rgba(201,169,97,.13), rgba(0,0,0,.15)) !important;
  background-image: linear-gradient(180deg, rgba(201,169,97,.13), rgba(0,0,0,.15)) !important;
  padding: 13px 18px 13px 26px !important;
  border-bottom: 1px solid var(--edge) !important;
  height: auto !important; line-height: 1.4 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.6) !important;
  position: relative;
}
.CaptionContainer .Text::before {
  content: ''; position: absolute; left: 11px; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; transform: rotate(45deg);
  background: var(--gold); box-shadow: 0 0 9px rgba(201,169,97,.5);
}

table.Table1, table.Table2, table.Table3, table.Table4, table.Table5,
.InnerTableContainer, .TableContentContainer, .TableShadowContainer,
.TableShadowContainerRightTop, .TableShadowContainerLeftTop {
  background: none !important; background-image: none !important;
  border: 0 !important; width: 100% !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important;
}
.TableContainer .InnerTableContainer { overflow-x: auto; }

table.TableContent {
  border: 0 !important; border-collapse: collapse !important;
  width: 100% !important; background: transparent !important;
  font-size: 13.5px !important; color: var(--ink-dim) !important;
}
table.TableContent td, table.TableContent th {
  border: 0 !important; border-bottom: 1px solid rgba(201,169,97,.10) !important;
  padding: 10px 16px !important; background-image: none !important; vertical-align: middle;
}
table.TableContent tr.LabelH td, table.TableContent tr.LabelH th, table.TableContent .LabelH {
  font-family: var(--f-mono) !important; font-size: 10px !important;
  letter-spacing: .13em !important; text-transform: uppercase !important;
  color: var(--gold-dim) !important; font-weight: 400 !important;
  background: linear-gradient(180deg, rgba(201,169,97,.10), rgba(0,0,0,.2)) !important;
  white-space: nowrap;
}
table.TableContent tr.Even td { background: transparent !important; }
table.TableContent tr.Odd  td { background: rgba(0,0,0,.22) !important; }
table.TableContent tr:hover td { background: rgba(201,169,97,.07) !important; }
table.TableContent a { color: var(--rune) !important; }
table.TableContent a:hover { color: var(--gold-soft) !important; }

.LabelV, .LabelV100, .LabelV150, .LabelV175, .LabelV200, .LabelV250, .LabelV300 {
  font-family: var(--f-mono) !important; font-size: 11px !important;
  letter-spacing: .06em !important; color: var(--gold-dim) !important;
  background: rgba(0,0,0,.25) !important; background-image: none !important;
}

.BigButton {
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 45%, var(--ember-lo) 100%) !important;
  background-image: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 45%, var(--ember-lo) 100%) !important;
  width: auto !important; min-width: 165px; height: auto !important;
  display: inline-block !important; margin: 6px 7px 6px 0 !important;
  padding: 0 !important; text-align: center; cursor: pointer;
  border: 1px solid var(--ember-lo) !important; border-radius: 3px !important;
  box-shadow: 0 4px 18px rgba(224,112,42,.28), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.3) !important;
  transition: transform .12s ease, filter .15s ease;
}
.BigButton:hover { filter: brightness(1.09); transform: translateY(-1px); }
.BigButton > div { position: static !important; display: block !important; }
.BigButtonOver { display: none !important; }
.BigButtonText {
  /* CRITICO: basic_d.css deixa este input em `position: absolute`, porque no
     tema antigo a altura do botao vinha do gif de fundo e o texto so flutuava
     por cima. Como aqui o botao usa `height: auto`, com o texto fora do fluxo
     ele COLAPSA para 2px — vira um risquinho e o texto cai fora da area
     clicavel. Vale para os ~267 BigButton do site, nao so para o Submit. */
  position: static !important;
  font-family: var(--f-display) !important; font-size: 14px !important; font-weight: 400 !important;
  /* letter-spacing NORMAL aqui, e nao por estetica: o vao que ele acrescenta
     DEPOIS da ultima letra nao entra na conta de `max-content`, entao o botao
     nascia 1px mais estreito que o texto e a ultima letra raspava na borda
     ("Re-request Emai|"). Foi o que me enganou tres vezes medindo. */
  letter-spacing: normal !important;
  color: #1B0C03 !important; background: none !important; background-image: none !important;
  border: 0 !important; padding: 11px 22px !important; width: 100% !important;
  height: auto !important; line-height: 1.4 !important; cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,255,255,.25) !important;
  -webkit-appearance: none; appearance: none;
}
/* O JS de criar conta usa opacity .5 para dizer "ainda nao pode enviar".
   Meio opaco em cima do gradiente ficava ilegivel: aqui o estado desabilitado
   vira cinza de verdade, que se le como desabilitado sem sumir da tela. */
.BigButton[style*="opacity: 0.5"], .BigButton[style*="opacity:0.5"] {
  opacity: 1 !important;
  background: linear-gradient(180deg, #55636B, #333E45) !important;
  background-image: linear-gradient(180deg, #55636B, #333E45) !important;
  border-color: #2A343A !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
  filter: none !important; transform: none !important;
}
.BigButton[style*="opacity: 0.5"] .BigButtonText,
.BigButton[style*="opacity:0.5"] .BigButtonText {
  color: #C3D0D6 !important; text-shadow: 0 1px 0 rgba(0,0,0,.5) !important; cursor: not-allowed;
}
.Button, .ButtonText, .SmallButton {
  background-image: none !important;
  background: linear-gradient(180deg, rgba(60,74,80,.6), rgba(18,26,30,.7)) !important;
  color: var(--gold-soft) !important; border: 1px solid var(--edge) !important;
  border-radius: 3px !important;
  font-family: var(--f-display) !important; letter-spacing: .07em;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
select, textarea {
  background: rgba(0,0,0,.5) !important; color: var(--ink) !important;
  border: 1px solid var(--edge) !important; border-radius: 3px !important;
  font-family: var(--f-body) !important; font-size: 14px !important;
  padding: 10px 13px !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
select:focus, textarea:focus { border-color: var(--gold) !important; outline: none; box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(201,169,97,.16) !important; }

.ErrorMessage, .AttentionSign {
  background-image: none !important; background: rgba(210,84,74,.13) !important;
  color: var(--danger) !important; border-left: 3px solid var(--danger) !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
  padding: calc(var(--u)*2) calc(var(--u)*2.5) !important;
}
.SuccessMessage {
  background-image: none !important; background: rgba(92,203,119,.13) !important;
  color: var(--online) !important; border-left: 3px solid var(--online) !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
  padding: calc(var(--u)*2) calc(var(--u)*2.5) !important;
}

/* --------------------------------- produto selecionado na loja ---------- */
/* O feedback de "selecionado" do tema antigo era uma imagem (serviceid_icon_
   selected.png) desenhada para fundo claro — no escuro nao se ve. Aqui o
   estado vem do PROPRIO radio via :has, entao vale mesmo se o JS falhar. */
.ServiceID_Icon_Container {
  border-radius: var(--r) !important;
  transition: box-shadow .15s ease, transform .15s ease;
}
.ServiceID_Icon_Container:hover { transform: translateY(-2px); }
.ServiceID_Icon_Container:has(input[name="product_id"]:checked),
.ServiceID_Icon_Container:has(input[name="pmid"]:checked) {
  box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(201,169,97,.4) !important;
  background: rgba(201,169,97,.10) !important;
}
/* marca de confirmacao no canto do escolhido */
.ServiceID_Icon_Container:has(input[name="product_id"]:checked)::after,
.ServiceID_Icon_Container:has(input[name="pmid"]:checked)::after {
  content: '\f00c';
  font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 12px;
  position: absolute; top: 8px; right: 8px; z-index: 120;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-dim));
  color: #1B1405; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* ------------------------------------------ escolha de vocacao ---------- */
.th-voc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.th-voc {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 14px; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.2));
  border: 1px solid var(--edge);
  transition: border-color .15s ease, background .15s ease;
}
.th-voc:hover { border-color: var(--edge-strong); }
.th-voc span { font-family: var(--f-display); font-size: 15px; color: var(--ink-dim); letter-spacing: .03em; }
/* :has para pintar o cartao inteiro do escolhido, nao so o radio */
.th-voc:has(input:checked) {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(201,169,97,.18), rgba(0,0,0,.2));
  box-shadow: 0 0 14px rgba(201,169,97,.16);
}
.th-voc:has(input:checked) span { color: var(--gold-soft); }
.th-voc-note { font-family: var(--f-mono); font-size: 11px; color: var(--muted); margin-top: 10px; }

/* --------------------------------------------- acoes de personagem ------ */
.th-charactions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.th-chaction {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
  padding: 5px 10px; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--edge);
  color: var(--ink-dim) !important; white-space: nowrap;
}
.th-chaction:hover { color: var(--gold-soft) !important; border-color: var(--edge-strong); background: rgba(201,169,97,.10); }
.th-chaction.danger:hover { color: #F0968E !important; border-color: rgba(210,84,74,.45); background: rgba(210,84,74,.12); }
.th-chaction i { font-size: 10px; }

/* faixa de ocultar personagens, no rodape da lista */
.th-hidebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--u)*2); flex-wrap: wrap;
  padding: calc(var(--u)*2); margin-top: calc(var(--u)*1.5);
  border-top: 1px solid var(--edge);
  background: rgba(0,0,0,.18);
}
.th-hidebar-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.th-hidebar-text b { font-size: 13.5px; color: var(--ink); }
.th-hidebar-text span { font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------- caixa de download --
   Substitui o icone generico do Windows pelo monograma do servidor. Linha em
   flex: some o `position:absolute` que empilhava o rotulo em cima do icone. */
.th-dlbox { display: flex; align-items: center; gap: 16px; padding: 4px 2px; }
.th-dlbox-mark { flex: 0 0 auto; display: inline-flex; line-height: 0; }
.th-dlbox .th-mono { width: 58px; height: 58px; flex-basis: 58px; border-radius: 15px; padding: 5px; }
.th-dlbox .th-mono .in { border-radius: 11px; }
.th-dlbox .th-mono i { font-size: 62px; }
.th-dlbox .th-mono .in::before { width: 58px; height: 54px; }
.th-dlbox-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.th-dlbox-text b {
  font-family: var(--f-display); font-size: 16px; font-weight: 400;
  letter-spacing: .04em; color: var(--gold-soft);
}
.th-dlbox-text span { font-size: 13.5px; color: var(--ink-dim); }

/* Rotulo longo como "Re-request Email" saia cortado. Duas causas somadas:
   o `max-width: 100%` prendia o botao na largura da CELULA (172px), e o
   `letter-spacing` acrescenta ~20px que nenhuma medicao de largura de texto
   simples enxerga. A celula da tabela cresce sozinha com o conteudo, entao
   soltar o teto e deixar a largura seguir o texto resolve sem estourar o
   painel — a caixa ja tem `overflow-x: auto` como rede de seguranca. */
.BigButton {
  width: max-content !important;
  max-width: none !important;
}
.BigButtonText {
  width: auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip;
  /* 22px e nao 16: o letter-spacing acrescenta um vao depois da ULTIMA letra,
     e com padding justo a perna do "l" final raspava na borda. */
  padding: 10px 22px !important;
}

/* O gif do indicador de status da conta e 52x52 e no tema antigo vinha
   dimensionado pelo proprio td. Com o `img { max-width: 100% }` global, dentro
   de uma celula estreita ele colapsava para 0x0 e o indicador sumia da tela —
   a conta parecia nao ter status nenhum. Medida explicita nao depende do td. */
img.AccountStatusImage {
  width: 52px !important; height: 52px !important;
  max-width: none !important; display: inline-block; vertical-align: middle;
}

.Text, .TextLeft, .TextRight { color: var(--ink-dim); }
.Themebox { background-image: none !important; background: rgba(0,0,0,.3) !important; border-radius: var(--r) !important; padding: calc(var(--u)*2) !important; }

/* ---------------------------------------------------------------------------
   9. TODOS os fundos claros do tema antigo.
   Levantei a lista varrendo o basic_d.css atras de background com luminancia
   alta: sao 23 seletores. Cacar um a um quando aparece na tela nao funciona —
   cada pagina usa um subconjunto diferente, e o que sobra e um bloco bege com
   texto escuro no meio do tema escuro, ilegivel. Estao todos aqui.
   --------------------------------------------------------------------------- */
.TableContainer .Odd,
.TableContainer .Even,
.TableContainer .Table1, .TableContainer .Table2, .TableContainer .Table3,
.TableContainer .Table4, .TableContainer .Table5,
.TableContentContainer,
.LabelH, .LabelH td,
.SmallBox .Message, .SmallBox .ErrorMessage,
.Content .Box, .Content .BoxContent,
.PostSeparatorV,
.StreamerInformation, .streamer_smallbox,
.Container2_PaymentMethod,
.TAF_RewardContainer, .TAF_Progress .TAF_Progress_Step_Taken, .TAF_Option:hover,
#PremiumFeaturesBox .TableContent th,
#ProgressBar .Tube {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink-dim) !important;
}

/* O bege tambem vem do ATRIBUTO HTML bgcolor, nao so de CSS: sao 80 ocorrencias
   em 20 views (#D4C0A1 x61 e #F1E0C6 x17). Nenhum seletor de classe alcanca
   isso — so o proprio atributo. Os dois `bgcolor="#505050"` ficam de fora
   porque ja sao escuros e servem de separador. */
[bgcolor="#D4C0A1" i], [bgcolor="#F1E0C6" i] {
  background-color: transparent !important;
  color: var(--ink-dim) !important;
}
[bgcolor="#D4C0A1" i] b, [bgcolor="#F1E0C6" i] b,
[bgcolor="#D4C0A1" i] strong, [bgcolor="#F1E0C6" i] strong { color: var(--ink) !important; }

/* zebra e cabecalho ganham o tom escuro no lugar do bege */
.TableContainer .Odd, .TableContainer .Odd td { background: rgba(0,0,0,.22) !important; }
.TableContainer .Even, .TableContainer .Even td { background: transparent !important; }
.LabelH, .LabelH td, #PremiumFeaturesBox .TableContent th {
  background: linear-gradient(180deg, rgba(201,169,97,.10), rgba(0,0,0,.2)) !important;
  color: var(--gold-dim) !important;
  font-family: var(--f-mono) !important; font-size: 10.5px !important;
  letter-spacing: .12em !important; text-transform: uppercase !important; font-weight: 400 !important;
}
/* o quadro "sua conta nao esta confirmada" e irmaos */
.HintBox, .SmallBox .Message, .SmallBox .ErrorMessage {
  background: rgba(224,178,85,.10) !important;
  border-left: 3px solid var(--warn) !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
  padding: calc(var(--u)*1.75) calc(var(--u)*2.25) !important;
  color: var(--ink) !important;
}
.HintBox p, .HintBox b, .HintBox a { color: var(--ink) !important; }
#ProgressBar .Tube { background: rgba(0,0,0,.4) !important; border: 1px solid var(--edge) !important; }

/* linhas de personagem: o hover do tema antigo pintava de bege */
.RowsWithOverEffect:hover, .RowsWithOverEffect:hover td,
tr.RowsWithOverEffect:hover td {
  background: rgba(201,169,97,.09) !important;
  color: var(--ink) !important;
}

/* ---------------------------------------------------------------------------
   10. Cor semantica dos botoes.
   O tema antigo distinguia acao pelo GIF de fundo: sbutton_green no que gasta
   dinheiro, sbutton_red no que encerra sessao, sbutton no resto. Pintar tudo de
   brasa apagou essa leitura — aqui ela volta, lendo o proprio style inline.
   --------------------------------------------------------------------------- */
.BigButton[style*="sbutton_green"] {
  background: linear-gradient(180deg, #6FD08A 0%, #45A55F 45%, #2C7742 100%) !important;
  background-image: linear-gradient(180deg, #6FD08A 0%, #45A55F 45%, #2C7742 100%) !important;
  border-color: #235F35 !important;
  box-shadow: 0 4px 18px rgba(69,165,95,.28), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.3) !important;
}
.BigButton[style*="sbutton_red"] {
  background: linear-gradient(180deg, #E0736B 0%, #C4433A 45%, #8E2A23 100%) !important;
  background-image: linear-gradient(180deg, #E0736B 0%, #C4433A 45%, #8E2A23 100%) !important;
  border-color: #74211B !important;
  box-shadow: 0 4px 18px rgba(196,67,58,.28), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.3) !important;
}
.BigButton[style*="sbutton_green"] .BigButtonText,
.BigButton[style*="sbutton_red"] .BigButtonText { color: #0E1A11 !important; }
.BigButton[style*="sbutton_red"] .BigButtonText { color: #200907 !important; }

/* Botao nao pode furar o painel: rotulo longo como "Re-request Email" estava
   passando da borda da caixa e sendo cortado. */
.BigButton {
  min-width: 132px !important; max-width: 100% !important;
  box-sizing: border-box !important; vertical-align: middle;
}
.BigButtonText { padding: 10px 16px !important; box-sizing: border-box !important; }
.InnerTableButtonRow { max-width: 100%; }

/* ===========================================================================
   Responsivo
   =========================================================================== */
@media (max-width: 1160px) {
  .th-cols { grid-template-columns: 214px minmax(0, 1fr); }
  .th-rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
}
@media (max-width: 800px) {
  body { font-size: 14.5px; }
  .th-shell { padding: 0 var(--u); }
  .th-cols { grid-template-columns: minmax(0, 1fr); }
  .th-nav { display: none; }
  .th-nav.open { display: flex; }
  .th-navtoggle {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--f-display); font-size: 13px; letter-spacing: .08em;
    padding: 10px 18px; border-radius: 3px;
    background: linear-gradient(180deg, rgba(60,74,80,.6), rgba(18,26,30,.7));
    border: 1px solid var(--edge); color: var(--gold-soft); cursor: pointer;
  }
  .th-main { padding: calc(var(--u)*2.5); }
  .th-top { padding: calc(var(--u)*2); gap: calc(var(--u)*2); }
  .th-mono { width: 62px; height: 62px; flex-basis: 62px; border-radius: 17px; padding: 5px; }
  .th-mono .in { border-radius: 12px; }
  .th-mono i { font-size: 66px; }
  .th-mono .in::before { width: 60px; height: 56px; }
  .th-word b { font-size: 30px; }
  .th-word .sub { display: none; }
  .th-hero { padding: calc(var(--u)*5) calc(var(--u)*3); }
  .th-foot { flex-direction: column; gap: var(--u); }
  .th-frame::before { inset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .th-sys:hover, .th-btn:hover, .BigButton:hover, .th-rank-row:hover { transform: none !important; }
}

/* ===========================================================================
   BUSCA DE PERSONAGEM
   Um controle so: lupa, campo e botao dentro da mesma moldura. O anel de foco
   e desenhado pelo pai (:focus-within) porque quem tem a borda e ele, nao o
   input — o input fica transparente e sem borda de proposito.
   =========================================================================== */
.th-charsearch { margin: 0 0 calc(var(--u)*3.5); }

.th-charsearch-b {
  padding: clamp(22px, 4vw, 38px) clamp(16px, 4vw, 34px) clamp(18px, 3vw, 26px) !important;
  text-align: center;
  /* brilho quente saindo do topo: tira o ar de caixa vazia */
  background:
    radial-gradient(ellipse 62% 130% at 50% -10%, rgba(201,169,97,.10), transparent 68%);
}

/* os tres <p> daqui caem no `.th-main p { max-width: 70ch }`, que existe para
   texto corrido. Numa caixa centrada isso desalinha o bloco em ~30px do campo,
   entao aqui o limite sai e a centragem volta pela margem automatica. */
.th-charsearch-b p { max-width: none; }

.th-charsearch-eyebrow {
  margin: 0 auto 15px !important;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------------------- o controle */
.th-charsearch-field {
  display: flex; align-items: stretch;
  width: min(600px, 100%); margin: 0 auto;
  border: 1px solid var(--edge-strong);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(5,9,11,.94), rgba(13,19,22,.88));
  box-shadow: inset 0 2px 9px rgba(0,0,0,.62), 0 6px 22px rgba(0,0,0,.34);
  transition: border-color .16s ease, box-shadow .16s ease;
  overflow: hidden;
}
.th-charsearch-field:focus-within {
  border-color: var(--gold);
  box-shadow:
    inset 0 2px 9px rgba(0,0,0,.62),
    0 0 0 3px rgba(201,169,97,.15),
    0 10px 32px rgba(0,0,0,.45);
}

.th-charsearch-ico {
  display: flex; align-items: center;
  padding: 0 0 0 18px;
  font-size: 14px; color: var(--gold-dim);
  transition: color .16s ease;
}
.th-charsearch-field:focus-within .th-charsearch-ico { color: var(--gold); }

/* o input global do tema tem borda, fundo e padding proprios — aqui ele e so
   o texto, a moldura e do pai. Dai o !important em bloco. */
.th-charsearch-field input[type="text"] {
  flex: 1 1 auto; min-width: 0;
  height: 54px;
  background: none !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; outline: none !important;
  padding: 0 14px !important; margin: 0 !important;
  font-family: var(--f-body) !important; font-size: 15px !important;
  color: var(--ink) !important; letter-spacing: .01em;
}
.th-charsearch-field input[type="text"]::placeholder { color: #6B7977; opacity: 1; }

.th-charsearch-field .th-btn {
  flex: 0 0 auto;
  border: 0 !important; border-left: 1px solid var(--ember-lo) !important;
  border-radius: 0 !important;
  padding: 0 clamp(18px, 3.4vw, 30px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34) !important;
}
/* dentro da moldura o botao nao pode subir 1px: abriria fresta na borda */
.th-charsearch-field .th-btn:hover { transform: none; filter: brightness(1.09); }

/* -------------------------------------------------------------- nao achou */
.th-charsearch-miss {
  display: flex; align-items: flex-start; gap: 10px;
  width: min(600px, 100%); margin: 14px auto 0 !important;
  padding: 11px 14px; text-align: left;
  border: 1px solid rgba(210,84,74,.34); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(210,84,74,.13), rgba(0,0,0,.2));
  font-size: 12.5px; line-height: 1.5; color: var(--ink-dim);
}
.th-charsearch-miss i { color: var(--danger); font-size: 13px; margin-top: 2px; }
.th-charsearch-miss b { color: #F0C4BF; font-weight: 500; }
.th-charsearch-miss em { display: block; font-style: normal; color: var(--muted); font-size: 11.5px; }

/* --------------------------------------------------------------- atalhos  */
.th-charsearch-quick {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px;
  width: min(760px, 100%); margin: 20px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--edge);
}
.th-charsearch-quick .lbl {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  margin-right: 2px;
}
.th-charsearch-quick a {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.26));
  font-size: 12.5px; color: var(--ink-dim); text-decoration: none;
  transition: color .14s ease, border-color .14s ease, background .14s ease, transform .12s ease;
}
.th-charsearch-quick a:hover {
  color: #FFF6E2; border-color: var(--gold-line);
  background: linear-gradient(180deg, rgba(201,169,97,.16), rgba(0,0,0,.28));
  transform: translateY(-1px);
}
.th-charsearch-quick a b { font-weight: 400; }
.th-charsearch-quick a em {
  font-style: normal; font-family: var(--f-mono); font-size: 10.5px;
  color: var(--gold-dim);
}
.th-charsearch-quick a:hover em { color: var(--gold-soft); }

.th-charsearch-hint {
  width: min(600px, 100%); margin: 14px auto 0 !important;
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
}

/* telas estreitas: o texto do botao sai e fica so a largura do toque */
@media (max-width: 460px) {
  .th-charsearch-ico { padding-left: 14px; }
  .th-charsearch-field input[type="text"] { height: 48px; font-size: 14px !important; padding: 0 10px !important; }
  .th-charsearch-field .th-btn { padding: 0 16px !important; }
  .th-charsearch-field .th-btn span { display: none; }
  .th-charsearch-field .th-btn::before {
    content: '\f002'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 14px;
  }
}

/* ===========================================================================
   FICHA DE PERSONAGEM
   Duas colunas: o personagem a esquerda, o dossie a direita. A coluna esquerda
   e estreita e fixa porque o paperdoll do Tibia tem largura natural (3 slots de
   40px); deixar ela fluida so faria o boneco nadar no vazio.
   =========================================================================== */
.th-cs {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: calc(var(--u)*2);
  align-items: start;
}
.th-cs-left, .th-cs-right { display: flex; flex-direction: column; gap: calc(var(--u)*2); min-width: 0; }

/* ---------------------------------------------------------------- retrato  */
.th-cs-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 14px 16px; text-align: center;
}
.th-cs-avatar {
  position: relative; width: 118px; height: 118px;
  display: grid; place-items: center; margin-bottom: 12px;
  /* halo: o gerador devolve png com fundo transparente, entao o brilho tem de
     vir de tras, nao de um filtro em cima do sprite */
  background:
    radial-gradient(circle at 50% 56%, rgba(201,169,97,.22), transparent 62%),
    radial-gradient(circle at 50% 56%, rgba(224,112,42,.10), transparent 74%);
}
.th-cs-avatar::after {
  content: ''; position: absolute; left: 50%; bottom: 12px;
  width: 76px; height: 12px; margin-left: -38px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
}
/* o gerador devolve 64x64 com o personagem so no quadrante inferior direito —
   por isso a ancora e 75% e nao o centro. Mesma conta do rank da lateral. */
.th-cs-avatar img {
  position: absolute; left: 50%; top: 50%;
  width: 128px; height: 128px; max-width: none; max-height: none;
  margin-left: -96px; margin-top: -96px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.75));
  pointer-events: none;
}
.th-cs-hero-name {
  font-family: var(--f-display); font-size: 17px; letter-spacing: .04em;
  color: var(--gold-soft); line-height: 1.2; overflow-wrap: anywhere;
}
.th-cs-hero-voc {
  font-size: 12px; color: var(--muted); margin-top: 2px;
}
.th-cs-status {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 11px;
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--edge);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.th-cs-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.th-cs-status.on { color: var(--online); border-color: rgba(92,203,119,.4); }
.th-cs-status.on i { background: var(--online); box-shadow: 0 0 8px var(--online); }

/* ------------------------------------------------------------- paperdoll   */
.th-cs-doll {
  display: grid; grid-template-columns: repeat(3, 44px);
  gap: 6px; justify-content: center; margin-bottom: 18px;
}
.th-cs-slot {
  position: relative; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--edge); border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.34));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.th-cs-slot.ghost { border: 0; background: none; box-shadow: none; }
.th-cs-slot img { width: 32px; height: 32px; image-rendering: pixelated; }
/* slot vazio: o gif de placeholder foi desenhado para fundo claro, entao aqui
   ele entra apagado, so como pista do que vai naquele lugar */
.th-cs-slot.vazio img { opacity: .3; filter: grayscale(1) brightness(1.5); }
.th-cs-slot:not(.vazio):not(.ghost) {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, rgba(201,169,97,.14), rgba(0,0,0,.34));
}
.th-cs-slot em {
  position: absolute; right: 1px; bottom: 0;
  font-style: normal; font-family: var(--f-mono); font-size: 9.5px;
  color: #FFF; text-shadow: 0 0 3px #000, 0 0 3px #000;
}

/* ------------------------------------------------------------------ barras */
.th-cs-bars { display: flex; flex-direction: column; gap: 13px; }
.th-cs-bar .lbl {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--ink-dim); margin-bottom: 5px;
}
.th-cs-bar .lbl i { margin-right: 6px; font-size: 10px; }
.th-cs-bar .lbl b { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink); }
.th-cs-bar .track {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(0,0,0,.55); box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.th-cs-bar .track i { display: block; height: 100%; border-radius: 999px; }
.th-cs-bar.hp .lbl i { color: #D2544A; }
.th-cs-bar.hp .track i { background: linear-gradient(90deg, #8E2A22, #D2544A); }
.th-cs-bar.mp .lbl i { color: #4E8FD4; }
.th-cs-bar.mp .track i { background: linear-gradient(90deg, #24537F, #4E8FD4); }
.th-cs-bar.xp .lbl i { color: var(--gold); }
.th-cs-bar.xp .track i { background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-soft)); }
.th-cs-bar small {
  display: block; margin-top: 5px;
  font-family: var(--f-mono); font-size: 9.5px; color: var(--muted);
}

/* ------------------------------------------------------------------ skills */
.th-cs-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.th-cs-skills li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.th-cs-skills .nome {
  font-size: 11.5px; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.th-cs-skills .nome i { width: 15px; color: var(--gold-dim); font-size: 10px; margin-right: 5px; }
.th-cs-skills b {
  font-family: var(--f-mono); font-size: 14px; color: var(--gold-soft); line-height: 1;
}
.th-cs-skills .track {
  grid-column: 1 / -1; height: 4px; border-radius: 999px;
  background: rgba(0,0,0,.5); overflow: hidden;
}
.th-cs-skills .track i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.th-cs-skills li.magic b { color: #7FB6E8; }
.th-cs-skills li.magic .nome i { color: #4E8FD4; }
.th-cs-skills li.magic .track i { background: linear-gradient(90deg, #24537F, #4E8FD4); }

/* ------------------------------------------------------------ atalhos topo */
.th-cs-jump { display: flex; gap: 10px; justify-content: center; padding: 12px; }
.th-cs-jump a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 3px; border: 1px solid var(--edge-strong);
  background: linear-gradient(180deg, rgba(60,74,80,.55), rgba(18,26,30,.7));
  color: var(--gold-soft); font-size: 15px; text-decoration: none;
  transition: color .14s ease, border-color .14s ease, transform .12s ease;
}
.th-cs-jump a:hover { color: #FFF6E2; border-color: var(--gold); transform: translateY(-2px); }
.th-cs-jump a.danger { color: #D98B84; }
.th-cs-jump a.danger:hover { color: #FFC9C3; border-color: var(--danger); }

/* --------------------------------------------------------- grade de dados  */
.th-cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.th-cs-grid .cell {
  padding: 9px 12px; border-radius: var(--r);
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.24));
  min-width: 0;
}
.th-cs-grid .cell.wide { grid-column: 1 / -1; }
.th-cs-grid dt {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.th-cs-grid dt i { margin-right: 6px; color: var(--gold-dim); }
.th-cs-grid dd {
  margin: 0; font-size: 13px; color: var(--ink); line-height: 1.35;
  overflow-wrap: anywhere;
}
.th-cs-grid dd.destaque { font-family: var(--f-display); font-size: 15px; color: var(--gold-soft); letter-spacing: .02em; }
.th-cs-grid dd a { color: var(--gold-soft); }
.th-cs-grid dd em { font-style: normal; color: var(--muted); }
.th-cs-premium { display: inline-flex; align-items: center; gap: 7px; color: var(--warn); }

/* ----------------------------------------------------------------- outfits */
.th-cs-outfits {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px;
}
.th-cs-outfits figure {
  margin: 0; padding: 8px 4px 6px; text-align: center;
  border: 1px solid var(--edge); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.26));
  transition: border-color .14s ease, transform .12s ease;
}
.th-cs-outfits figure:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.th-cs-outfits figure.prem { border-color: rgba(224,178,85,.3); }
/* mesma correcao de quadrante do retrato, em escala menor */
.th-cs-outfits figure > img {
  display: block; width: 96px; height: 96px; max-width: none;
  margin: -24px 0 -24px -16px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.7));
}
.th-cs-outfits figcaption {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.th-cs-outfits figure.prem figcaption { color: var(--warn); }
.th-cs-nota {
  margin: 12px 0 0 !important; max-width: none;
  font-size: 10.5px; color: var(--muted); line-height: 1.5;
}

/* ----------------------------------------------------------------- mortes  */
.th-cs-death {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid rgba(201,169,97,.09);
}
.th-cs-death:last-child { border-bottom: 0; padding-bottom: 0; }
.th-cs-death > i { color: var(--danger); font-size: 13px; margin-top: 3px; flex: 0 0 auto; }
.th-cs-death time {
  display: block; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 2px;
}
.th-cs-death p { margin: 0 !important; max-width: none; font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; }
.th-cs-death p b { color: var(--ink); font-weight: 500; }
.th-cs-death .assassino { color: #D98B84; }
a.th-cs-death .assassino, .th-cs-death a.assassino { text-decoration: none; }
.th-cs-death a.assassino:hover { color: #FFC9C3; }
.th-cs-death .unjust {
  font-style: normal; margin-left: 5px; font-size: 10px;
  color: var(--danger); text-transform: uppercase; letter-spacing: .08em;
}
.th-cs-vazio { margin: 0 !important; max-width: none; font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- irmaos   */
.th-cs-chars { display: flex; flex-direction: column; gap: 6px; }
.th-cs-chars a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r); text-decoration: none;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.24));
  transition: border-color .14s ease, background .14s ease;
}
.th-cs-chars a:hover { border-color: var(--gold-line); background: linear-gradient(180deg, rgba(201,169,97,.13), rgba(0,0,0,.26)); }
.th-cs-chars a.atual { border-color: var(--gold-line); }
.th-cs-chars b { font-weight: 400; font-size: 13px; color: var(--gold-soft); }
.th-cs-chars em { font-style: normal; font-family: var(--f-mono); font-size: 10px; color: var(--muted); margin-left: auto; }
.th-cs-chars .on {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--online);
}

/* ------------------------------------------------------------------- ban   */
.th-cs-ban {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px; margin-bottom: calc(var(--u)*2);
  border: 1px solid rgba(210,84,74,.4); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(210,84,74,.16), rgba(0,0,0,.2));
  color: #F0C4BF; font-size: 13px;
}
.th-cs-ban i { color: var(--danger); }

/* ------------------------------------------------------------- responsivo  */
@media (max-width: 900px) {
  .th-cs { grid-template-columns: minmax(0, 1fr); }
  .th-cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .th-cs-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   FICHA — ITENS, LEALDADE, QUESTS E EXPERIENCIA
   =========================================================================== */

/* ------------------------------------------------- lista de itens com nome  */
.th-cs-itens { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.th-cs-itens li {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 7px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.2));
  font-size: 11.5px; color: var(--ink-dim);
}
.th-cs-itens img { width: 22px; height: 22px; image-rendering: pixelated; flex: 0 0 22px; }
.th-cs-itens span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-cs-itens em {
  margin-left: auto; font-style: normal; font-family: var(--f-mono);
  font-size: 10px; color: var(--gold-dim);
}
.th-cs-vazio.pequeno { font-size: 11.5px; margin-bottom: 16px !important; }

/* ----------------------------------------------------------- outfit atual   */
.th-cs-outfit-atual { display: flex; align-items: center; gap: 18px; }
.th-cs-outfit-atual figure {
  margin: 0; width: 96px; height: 96px; position: relative; flex: 0 0 96px;
  border: 1px solid var(--edge); border-radius: var(--r);
  background:
    radial-gradient(circle at 50% 58%, rgba(201,169,97,.16), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.26));
  overflow: hidden;
}
.th-cs-outfit-atual figure.full { border-color: var(--gold-line); }
/* mesma correcao de quadrante do retrato: o gerador poe o boneco no canto */
.th-cs-outfit-atual img {
  position: absolute; left: 50%; top: 50%;
  width: 112px; height: 112px; max-width: none;
  margin-left: -84px; margin-top: -84px;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.75));
}
.th-cs-outfit-atual dl { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.th-cs-outfit-atual dt {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.th-cs-outfit-atual dd { margin: 0; font-size: 13px; color: var(--ink); }
.th-cs-outfit-atual dd.ok { color: var(--warn); display: flex; align-items: center; gap: 7px; }

/* ---------------------------------------------------------------- lealdade  */
.th-cs-loyal {
  padding: 14px; border-radius: var(--r);
  border: 1px solid var(--edge);
  background:
    radial-gradient(ellipse 70% 140% at 50% 0%, rgba(201,169,97,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.24));
}
.th-cs-loyal .faixa { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.th-cs-loyal .faixa b {
  font-family: var(--f-display); font-size: 17px; letter-spacing: .03em; color: var(--gold-soft);
}
.th-cs-loyal .faixa em {
  font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--warn);
}
.th-cs-loyal .track {
  height: 6px; border-radius: 999px; margin: 10px 0 6px;
  background: rgba(0,0,0,.55); overflow: hidden;
}
.th-cs-loyal .track i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-soft));
}
.th-cs-loyal small { display: block; font-family: var(--f-mono); font-size: 9.5px; color: var(--muted); }
.th-cs-loyal .fontes {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--edge);
  font-size: 11px; color: var(--muted);
}
.th-cs-loyal .fontes b { color: var(--ink-dim); font-family: var(--f-mono); font-size: 11.5px; margin-left: 4px; }

.th-cs-sub {
  display: flex; align-items: baseline; gap: 10px;
  margin: 20px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--edge);
  font-family: var(--f-display); font-size: 13px; letter-spacing: .08em;
  color: var(--gold-soft); font-weight: 400;
}
.th-cs-sub span { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); }

/* ------------------------------------------------------------------ quests  */
.th-cs-quests { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px; }
.th-cs-quests > div {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: 3px;
  border: 1px solid var(--edge); border-left: 3px solid var(--danger);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.24));
  font-size: 12px; color: var(--muted);
}
.th-cs-quests > div.feita {
  border-left-color: var(--online); color: var(--ink-dim);
  background: linear-gradient(180deg, rgba(92,203,119,.09), rgba(0,0,0,.24));
}
.th-cs-quests .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-cs-quests em {
  margin-left: auto; font-style: normal; font-family: var(--f-mono);
  font-size: 10px; color: var(--gold-dim); flex: 0 0 auto;
}
.th-cs-quests i { font-size: 11px; color: var(--danger); flex: 0 0 auto; }
.th-cs-quests > div.feita i { color: var(--online); }
.th-cs-quests > div.feita em { color: var(--gold); }

/* -------------------------------------------------------------- experiencia */
.th-cs-graf { display: block; width: 100%; height: 74px; margin-bottom: 14px; }

.th-cs-exp { width: 100%; border-collapse: collapse; font-size: 12px; }
.th-cs-exp th {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
  text-align: left; padding: 0 8px 8px; border-bottom: 1px solid var(--edge);
}
.th-cs-exp th.num, .th-cs-exp td.num { text-align: right; }
.th-cs-exp td { padding: 8px; border-bottom: 1px solid rgba(201,169,97,.07); color: var(--ink-dim); }
.th-cs-exp tbody tr:last-child td { border-bottom: 0; }
.th-cs-exp tr.hoje td { color: var(--ink); }
.th-cs-exp tr.hoje td:first-child { font-family: var(--f-display); letter-spacing: .04em; color: var(--gold-soft); }
.th-cs-exp td.ganho { color: var(--online); font-family: var(--f-mono); font-size: 11.5px; }
.th-cs-exp td.perda { color: var(--danger); font-family: var(--f-mono); font-size: 11.5px; }
.th-cs-exp td.ganho i, .th-cs-exp td.perda i { font-size: 8px; margin-right: 4px; }
.th-cs-exp td.tempo { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.th-cs-exp tfoot td {
  border-top: 1px solid var(--edge); border-bottom: 0;
  padding-top: 10px; font-family: var(--f-display); letter-spacing: .06em;
  color: var(--gold-soft);
}
.th-cs-exp tfoot td.ganho, .th-cs-exp tfoot td.perda, .th-cs-exp tfoot td.tempo { font-family: var(--f-mono); }

@media (max-width: 520px) {
  .th-cs-outfit-atual { flex-direction: column; align-items: flex-start; }
  .th-cs-exp { font-size: 11px; }
  .th-cs-exp th, .th-cs-exp td { padding: 6px 4px; }
}