@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
/* =========================================================
   jOTa — Highscores stylesheet
   Carregado APENAS na pagina de ranking (link dentro do twig).
   Toda a paleta vive escopada em .jota-hs para nao colidir com
   as vars globais do jota.css. O fundo escuro proprio garante
   o contraste do design mesmo dentro do painel pergaminho do site.
   ========================================================= */
.jota-hs{
  /* paleta aprovada do projeto (mesma do mockup) */
  --navy:#0b1322; --navy-2:#131e36; --navy-3:#1c2a48;
  --parchment:#f1e3bf; --parchment-2:#e8d6a4; --parchment-3:#ddc78b;
  --ink:#2a1a0e; --ink-soft:#4a2f1c;
  --gold:#c9a85a; --gold-hi:#efd58a; --gold-lo:#8e7233;
  --crimson:#8a1f2b; --crimson-hi:#a8313e; --crimson-lo:#5d141c;
  --teal:#2d9b8e; --silver:#c4c7cb; --bronze:#b08144;
  --voc-knight:#6b7787; --voc-paladin:#6a8a4c; --voc-druid:#b8893a;
  --voc-sorc:#7a4a8a; --voc-none:#8b8073;

  font-family:"Cormorant Garamond", Georgia, serif;
  color: var(--parchment);
  font-size: 17px;
  line-height: 1.45;
  /* preenche a area de conteudo (cancela o padding do .pb do jota) */
  margin: -13px -14px;
  padding: 26px 22px 42px;
  background: radial-gradient(1200px 700px at 50% -180px, var(--navy-3) 0%, var(--navy) 62%) var(--navy);
  border-radius: 2px;
  -webkit-font-smoothing: antialiased;
}
.jota-hs a{ color: var(--parchment); text-decoration:none; }
.jota-hs a:hover{ color: var(--gold-hi); }
.jota-hs *{ box-sizing: border-box; }

/* ----- PENNANT ----- */
.jota-hs .pennant{
  position:relative;
  background: linear-gradient(180deg, var(--crimson-hi) 0%, var(--crimson) 60%, var(--crimson-lo) 100%);
  color:var(--parchment);
  padding: 22px 36px 38px;
  margin: 0 auto 8px;
  width: min(100%, 760px);
  text-align:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - 18px),
    93.75% 100%, 87.5% calc(100% - 18px), 81.25% 100%, 75% calc(100% - 18px),
    68.75% 100%, 62.5% calc(100% - 18px), 56.25% 100%, 50% calc(100% - 18px),
    43.75% 100%, 37.5% calc(100% - 18px), 31.25% 100%, 25% calc(100% - 18px),
    18.75% 100%, 12.5% calc(100% - 18px), 6.25% 100%, 0 calc(100% - 18px)
  );
}
.jota-hs .pennant::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-hi) 50%, var(--gold) 80%, transparent);
}
.jota-hs .pennant h1{
  font-family:"Cinzel",serif; font-weight:700;
  letter-spacing:.28em; margin: 4px 0 6px;
  font-size: clamp(28px, 4.2vw, 42px); color: var(--parchment);
  text-shadow: 0 2px 0 var(--crimson-lo), 0 0 24px rgba(0,0,0,.5);
}
.jota-hs .pennant .crest{
  font-family:"Cinzel",serif; font-weight:800;
  font-size:14px; letter-spacing:.4em;
  color:var(--gold-hi); margin-bottom:2px;
}
.jota-hs .pennant .crest::before, .jota-hs .pennant .crest::after{
  content:"\2726"; margin: 0 .8em; color: var(--gold);
}
.jota-hs .pennant .sub{
  font-style: italic; font-size: 18px;
  color: rgba(255,235,200,.85); letter-spacing:.04em;
}
.jota-hs .pennant .sub strong{
  font-style:normal; color: var(--gold-hi); font-weight:600; letter-spacing:.08em;
}
.jota-hs .pennant .dragon-l, .jota-hs .pennant .dragon-r{
  position:absolute; top:50%; transform:translateY(-50%);
  width:64px; height:64px; opacity:.22; pointer-events:none;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.4));
}
.jota-hs .pennant .dragon-l{ left:14px }
.jota-hs .pennant .dragon-r{ right:14px; transform: translateY(-50%) scaleX(-1) }

/* ----- UPDATE NOTE ----- */
.jota-hs .update-note{
  text-align:center; font-style:italic; font-size:14px;
  color: rgba(241,227,191,.55); margin: 14px 0 24px; letter-spacing:.02em;
}
.jota-hs .update-note .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--teal); margin: 0 8px 1px; vertical-align: middle;
  box-shadow: 0 0 6px var(--teal);
}

/* ----- FILTERS ----- */
.jota-hs .filters{
  background: linear-gradient(180deg, var(--navy-2), var(--navy-3));
  border: 1px solid rgba(201,168,90,.28);
  border-radius: 4px; padding: 16px 18px; margin-bottom: 22px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.jota-hs .filter-row + .filter-row{
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed rgba(201,168,90,.18);
}
.jota-hs .filter-label{
  font-family:"Cinzel",serif; font-size: 11px;
  letter-spacing:.28em; color: var(--gold);
  text-transform: uppercase; margin: 0 14px 0 0;
  display:inline-block; vertical-align:middle; min-width: 78px;
}
.jota-hs .tabs, .jota-hs .chips{
  display:inline-flex; flex-wrap:wrap; gap: 6px; vertical-align:middle;
}
.jota-hs .tabs .tab{
  font-family:"Cinzel",serif; font-size:12px;
  letter-spacing:.16em; text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid rgba(201,168,90,.25);
  background: rgba(11,19,34,.4); color: var(--parchment);
  border-radius: 2px; cursor: pointer;
  transition: all .15s ease;
  text-decoration: none; display:inline-block;
}
.jota-hs .tabs .tab:hover{
  border-color: var(--gold); color: var(--gold-hi);
  background: rgba(201,168,90,.08);
}
.jota-hs .tabs .tab.active{
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-lo) 100%);
  color: var(--navy); border-color: var(--gold-hi); font-weight:700;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 8px rgba(201,168,90,.3);
}
.jota-hs .chips .chip{
  font-family:"Cinzel",serif; font-size:11px;
  letter-spacing:.18em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 14px;
  border: 1px solid currentColor; background: transparent;
  cursor: pointer; transition: all .15s ease; opacity:.75;
  text-decoration:none; display:inline-block;
}
.jota-hs .chips .chip:hover{ opacity:1 }
.jota-hs .chips .chip.active{ background: currentColor; opacity:1 }
.jota-hs .chips .chip.active .chip-label{ color: var(--navy); font-weight:700 }
.jota-hs .chips .chip .chip-label{ color: currentColor }
.jota-hs .chips .chip.all     { color: var(--gold) }
.jota-hs .chips .chip.knight  { color: var(--voc-knight) }
.jota-hs .chips .chip.paladin { color: var(--voc-paladin) }
.jota-hs .chips .chip.druid   { color: var(--voc-druid) }
.jota-hs .chips .chip.sorc    { color: var(--voc-sorc) }
.jota-hs .chips .chip.none    { color: var(--voc-none) }

/* ----- PODIUM ----- */
.jota-hs .podium{
  display:grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 14px; align-items: end; margin-bottom: 28px;
}
.jota-hs .podium-card{
  position:relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.018) 2px 4px),
    linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%);
  color: var(--ink);
  padding: 26px 18px 22px; text-align:center;
  border-radius: 2px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(201,168,90,.35);
  isolation:isolate;
}
.jota-hs .podium-card::before{
  content:""; position:absolute; inset:6px;
  border: 1px solid rgba(142,114,51,.45);
  pointer-events:none; border-radius: 1px;
}
.jota-hs .podium-card.first{ padding-top: 38px; padding-bottom: 30px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(201,168,90,.6), 0 0 24px rgba(201,168,90,.18);
}
.jota-hs .podium-card.first::before { border-color: var(--gold); border-width: 2px }
.jota-hs .podium-card.second::before{ border-color: var(--silver) }
.jota-hs .podium-card.third::before { border-color: var(--bronze) }
.jota-hs .rank-badge{
  font-family:"Cinzel",serif; font-weight:700;
  font-size: 14px; letter-spacing:.3em;
  display:inline-block; padding: 4px 10px;
  border-radius: 1px; margin-bottom: 8px;
}
.jota-hs .first  .rank-badge{ background: var(--gold);   color: var(--navy); box-shadow: 0 2px 6px rgba(201,168,90,.4) }
.jota-hs .second .rank-badge{ background: var(--silver); color: var(--navy) }
.jota-hs .third  .rank-badge{ background: var(--bronze); color: var(--parchment) }
.jota-hs .crown{
  position:absolute; top:-22px; left:50%;
  transform: translateX(-50%);
  width: 40px; height: 30px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.jota-hs .outfit-box{
  width: 128px; height: 128px; margin: 0 auto 10px;
  display:flex; align-items:flex-end; justify-content:center;
  background:
    radial-gradient(60% 40% at 50% 90%, rgba(0,0,0,.18) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.04) 100%);
}
.jota-hs .podium-card.first .outfit-box{ width:140px; height:140px }
.jota-hs .outfit-box img{
  image-rendering: pixelated; max-width:100%; max-height:100%;
  transform: scale(1.6); transform-origin: center bottom;
}
.jota-hs .podium-card.first .outfit-box img{ transform: scale(1.8) }
.jota-hs .char-name{
  font-family:"Cinzel",serif; font-weight:600;
  font-size: 18px; letter-spacing:.06em;
  color: var(--ink); margin: 6px 0 2px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.jota-hs .podium-card.first .char-name{ font-size: 20px }
.jota-hs .char-name a{ color: var(--ink); }
.jota-hs .char-name a:hover{ color: var(--crimson); }
.jota-hs .hs-flag img{ width:18px; height:12px; vertical-align:middle;
  border:1px solid rgba(0,0,0,.25); border-radius:1px; image-rendering:auto; }
.jota-hs .char-voc{
  font-style: italic; font-size: 15px;
  color: var(--ink-soft); margin-bottom: 12px;
}
.jota-hs .voc-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-right: 4px; vertical-align: middle;
  border: 1px solid rgba(0,0,0,.25);
}
.jota-hs .stat-row{
  display:flex; justify-content: space-around; align-items:baseline;
  border-top: 1px dashed rgba(142,114,51,.4); padding-top: 10px;
}
.jota-hs .stat{ display:flex; flex-direction:column; align-items:center; gap:2px }
.jota-hs .stat-label{
  font-family:"Cinzel",serif; font-size: 9px;
  letter-spacing:.28em; text-transform: uppercase; color: var(--ink-soft);
}
.jota-hs .stat-value{
  font-family:"Cinzel",serif; font-weight:700;
  font-size: 22px; color: var(--ink); line-height:1;
}
.jota-hs .podium-card.first .stat-value{ font-size: 26px; color: var(--gold-lo) }

/* ----- SCROLL ----- */
.jota-hs .scroll{
  position:relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.018) 2px 4px),
    linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%);
  color: var(--ink); border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(201,168,90,.4);
  margin: 0 0 18px;
}
.jota-hs .scroll::before, .jota-hs .scroll::after{
  content:""; position:absolute; left:0; right:0; height: 14px;
  background: linear-gradient(180deg, var(--crimson) 0%, var(--crimson-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.jota-hs .scroll::before{
  top: -14px;
  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    96% 60%, 92% 100%, 88% 60%, 84% 100%, 80% 60%, 76% 100%,
    72% 60%, 68% 100%, 64% 60%, 60% 100%, 56% 60%, 52% 100%,
    48% 60%, 44% 100%, 40% 60%, 36% 100%, 32% 60%, 28% 100%,
    24% 60%, 20% 100%, 16% 60%, 12% 100%, 8% 60%, 4% 100%, 0 60%
  );
}
.jota-hs .scroll::after{
  bottom: -14px;
  background: linear-gradient(180deg, var(--crimson-lo) 0%, var(--crimson) 100%);
  clip-path: polygon(
    0 100%, 100% 100%, 100% 0,
    96% 40%, 92% 0, 88% 40%, 84% 0, 80% 40%, 76% 0,
    72% 40%, 68% 0, 64% 40%, 60% 0, 56% 40%, 52% 0,
    48% 40%, 44% 0, 40% 40%, 36% 0, 32% 40%, 28% 0,
    24% 40%, 20% 0, 16% 40%, 12% 0, 8% 40%, 4% 0, 0 40%
  );
}
.jota-hs .scroll-title{
  font-family:"Cinzel",serif; font-weight:600;
  font-size:13px; letter-spacing:.32em; text-transform: uppercase;
  color: var(--ink-soft); padding: 16px 22px 0;
  display:flex; align-items:center; gap:14px;
}
.jota-hs .scroll-title::before, .jota-hs .scroll-title::after{
  content:""; flex:1; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold-lo), transparent);
}
.jota-hs .list{ list-style:none; margin:0; padding: 10px 0 18px }
.jota-hs .list li{
  display:grid;
  grid-template-columns: 48px 56px 1fr auto auto;
  align-items:center; gap: 14px; padding: 10px 22px;
  border-top: 1px dashed rgba(142,114,51,.22);
  transition: background .12s ease;
}
.jota-hs .list li:first-child{ border-top: none }
.jota-hs .list li:hover{
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,90,.14) 50%, transparent 100%);
}
.jota-hs .list .pos{
  font-family:"Cinzel",serif; font-weight:700;
  font-size: 20px; color: var(--gold-lo);
  text-align:right; padding-right: 6px;
}
.jota-hs .list .outfit{
  width: 56px; height: 56px;
  display:flex; align-items:flex-end; justify-content:center;
}
.jota-hs .list .outfit img{
  image-rendering: pixelated; transform: scale(1.3);
  transform-origin: center bottom; max-width:100%; max-height:100%;
}
.jota-hs .list .who{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.jota-hs .list .who a{
  font-family:"Cinzel",serif; font-size: 16px;
  font-weight:600; letter-spacing:.04em; color: var(--ink);
  display:flex; align-items:center; gap:7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.jota-hs .list .who a:hover{ color: var(--crimson) }
.jota-hs .list .who .voc{
  font-style: italic; font-size: 14px; color: var(--ink-soft);
}
.jota-hs .list .lvl{ text-align:right }
.jota-hs .list .lvl-label{
  font-family:"Cinzel",serif; font-size: 9px;
  letter-spacing:.28em; color: var(--ink-soft);
  text-transform:uppercase; display:block;
}
.jota-hs .list .lvl-value{
  font-family:"Cinzel",serif; font-weight:700;
  font-size: 20px; color: var(--ink); line-height:1;
}
.jota-hs .list .xp{
  text-align:right; font-family:"Cinzel",serif; font-weight:500;
  font-size: 14px; color: var(--ink-soft); letter-spacing:.04em;
  min-width: 110px;
}
.jota-hs .scroll-foot{
  padding: 0 22px 18px; text-align:center;
  font-style:italic; font-size: 13px;
  color: var(--ink-soft); opacity:.75;
}

/* ----- EMPTY ----- */
.jota-hs .hs-empty{
  text-align:center; font-style:italic; font-size:16px;
  color: rgba(241,227,191,.7); padding: 40px 0;
}

/* ----- PAGER ----- */
.jota-hs .hs-pager{
  display:flex; justify-content:center; gap:14px; margin-top: 4px;
}
.jota-hs .hs-pager .pg{
  font-family:"Cinzel",serif; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; padding: 8px 16px; border-radius: 2px;
  border: 1px solid rgba(201,168,90,.3); color: var(--gold-hi);
  background: rgba(11,19,34,.4); text-decoration:none;
  transition: all .15s ease;
}
.jota-hs .hs-pager .pg:hover{ border-color: var(--gold); background: rgba(201,168,90,.08); color: var(--gold-hi); }

/* ----- RESPONSIVE ----- */
@media (max-width: 760px){
  .jota-hs{ padding: 22px 12px 32px }
  .jota-hs .pennant h1{ letter-spacing:.18em }
  .jota-hs .pennant{ padding: 18px 18px 32px }
  .jota-hs .filter-label{ display:block; margin: 0 0 8px }
  .jota-hs .filters{ padding: 14px }
  .jota-hs .podium{ grid-template-columns: 1fr; gap: 12px }
  .jota-hs .podium-card{ padding-top: 22px !important }
  .jota-hs .podium-card.first{ order: -1 }
  .jota-hs .outfit-box, .jota-hs .podium-card.first .outfit-box{ width:108px; height:108px }
  .jota-hs .list li{
    grid-template-columns: 36px 48px 1fr auto;
    gap: 10px; padding: 10px 14px;
  }
  .jota-hs .list .xp{ display:none }
  .jota-hs .list .pos{ font-size: 16px }
  .jota-hs .list .who a{ font-size: 14px }
  .jota-hs .list .lvl-value{ font-size: 18px }
  .jota-hs .scroll-title{ padding: 14px 14px 0; font-size: 11px }
}

/* ----- HARD OVERRIDES p/ vencar regras vazadas do .content-box .pb ----- */
.content-box .pb .jota-hs img{ max-width:100%; height:auto; }
.content-box .pb .jota-hs .pennant h1{ color: var(--parchment); }
.content-box .pb > small{ display:none; } /* nota de cache duplicada (mostramos a nossa) */
.content-box .pb > br{ display:none; }     /* <br><br> que seguiam a nota de cache */