/* extra.css — componentes especificos do ArkCMS sobre o design rox
   (fonte, medalhoes de classe, loja, menu de conta, ranking, perfil, etc.) */

body{font-family:"Inter","Segoe UI",Roboto,system-ui,sans-serif}

/* ===== HEADER estilo rox: logo central + menu dividido + icones ===== */
.header-inner{display:flex;align-items:center;gap:.5rem;min-height:90px;position:relative}
.nav-wrap{flex:1;display:flex;align-items:center;justify-content:center;gap:1rem}
.nav-left,.nav-right{flex:1;margin:0}
.nav-left > ul,.nav-right > ul{gap:.55rem}
.nav-left > ul{justify-content:flex-end}
.nav-right > ul{justify-content:flex-start}
.nav a,.nav button{padding:.6rem 1.05rem;white-space:nowrap;display:inline-flex;align-items:center}
.nav .bi{margin-right:.4rem;color:var(--accent-2)}
.sidebar{top:104px}
.nav a:hover .bi,.nav button:hover .bi{color:var(--gold)}

/* Logo central METIN2 / AVENYX */
.brand-center{display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;text-decoration:none;padding:0 2.2rem;flex:0 0 auto}
.brand-logo{height:56px;width:auto;display:block}
.brand-logo-img{height:82px;width:auto;display:block;mix-blend-mode:screen;
  filter:drop-shadow(0 0 12px rgba(63,176,240,.4))}
:root[data-theme="light"] .brand-logo-img{mix-blend-mode:normal;border-radius:8px}
.brand-top{font-family:"Inter",sans-serif;font-size:.6rem;letter-spacing:5px;color:var(--accent-2);
  font-weight:700;margin-bottom:3px}
.brand-name{font-family:var(--ff-display);font-size:1.7rem;font-weight:900;letter-spacing:3px;
  background:linear-gradient(180deg,#ffffff 0%,#9ad6fb 55%,#2f9fe6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 12px rgba(63,176,240,.55))}
.brand-mobile{display:none;text-decoration:none}

.header-tools{display:flex;align-items:center;gap:.4rem}
.btn-icon{padding:.5rem .6rem;font-size:1rem;line-height:1}

@media (max-width:1150px){
  .brand-name{font-size:1.35rem}
  .nav a,.nav button{padding:.5rem .4rem;font-size:.72rem}
  .nav .bi{margin-right:.2rem}
}
@media (max-width:980px){
  .burger{display:flex;order:0}
  .brand-mobile{display:block;margin-right:auto}
  .brand-mobile .brand-name{font-size:1.2rem}
  .nav-wrap{position:fixed;inset:90px 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--surface);border-bottom:1px solid var(--line);padding:1rem;display:none;z-index:39;gap:.25rem}
  .nav-wrap.is-open{display:flex}
  .nav-left,.nav-right{flex:none;width:100%}
  .nav-left > ul,.nav-right > ul{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .brand-center{display:none}
  .has-sub .sub{position:static;box-shadow:none;border:0;padding-left:1rem}
}

/* ---- HERO de download ---- */
.hero-cta{display:grid;gap:var(--sp-3);padding:var(--sp-5) var(--sp-4);
  background:linear-gradient(135deg,var(--surface-2),transparent);
  border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--sp-5);text-align:center}
.hero-cta h2{font-family:var(--ff-display);color:var(--gold);letter-spacing:2px;margin:0}
.btn-download{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--ff-display);font-size:1.15rem;letter-spacing:2px;text-transform:uppercase;
  padding:.9rem 2.2rem;border-radius:var(--radius);color:#20180a;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));font-weight:900;
  box-shadow:0 10px 30px -8px rgba(227,192,90,.5);transition:.2s}
.btn-download:hover{transform:translateY(-2px);filter:brightness(1.06);text-decoration:none;
  box-shadow:0 16px 40px -8px rgba(227,192,90,.65)}

/* ===== HERO BANNER de lançamento ===== */
.hero-banner{position:relative;overflow:hidden;border-radius:var(--radius);margin-bottom:var(--sp-5);
  border:1px solid var(--line);box-shadow:var(--shadow);min-height:310px;
  display:flex;align-items:center;gap:1.5rem;padding:1.6rem 2rem;
  background:
    linear-gradient(90deg, rgba(4,16,29,.96) 0%, rgba(4,16,29,.72) 50%, rgba(6,32,64,.55) 100%),
    url(/images/background-top.webp) center/cover no-repeat,
    #04101d}
.hero-banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 78% 42%, rgba(63,176,240,.22), transparent 55%)}
.hero-logo{position:relative;z-index:1;height:250px;width:auto;max-width:46%;object-fit:contain;flex:0 0 auto;
  mix-blend-mode:screen;filter:drop-shadow(0 0 26px rgba(63,176,240,.55))}
.hero-content{position:relative;z-index:1;flex:1;min-width:0}
.hero-kicker{display:inline-block;font-family:var(--ff-display);letter-spacing:3px;text-transform:uppercase;
  font-size:.78rem;font-weight:700;color:#04121a;padding:.28rem .85rem;border-radius:999px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 6px 16px -6px rgba(227,192,90,.6)}
.hero-title{font-family:var(--ff-display);font-size:2.5rem;line-height:1.04;margin:.6rem 0 .5rem;font-weight:900;
  background:linear-gradient(180deg,#ffffff 0%,#9ad6fb 58%,#2f9fe6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 12px rgba(63,176,240,.45))}
.hero-slogan{font-style:italic;color:#cfe3f5;margin:0 0 1rem;font-size:1.06rem;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.hero-features{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem;list-style:none;padding:0}
.hero-features span{font-size:.82rem;background:rgba(255,255,255,.06);border:1px solid var(--line);
  padding:.35rem .75rem;border-radius:999px;color:#dbe8f5}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}

@media (max-width:760px){
  .hero-banner{flex-direction:column;text-align:center;padding:1.4rem;min-height:0}
  .hero-logo{max-width:78%;height:auto}
  .hero-title{font-size:1.9rem}
  .hero-features,.hero-actions{justify-content:center}
}

/* ---- TOP PLAYERS (medalhoes de classe) ---- */
.top-players .card-head h2{font-family:var(--ff-display);letter-spacing:2px;color:var(--gold);margin:0}
.tp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);
  padding:var(--sp-4);justify-items:center}
.tp-card{width:100%;max-width:190px;text-align:center;transition:.25s}
.tp-card:hover{transform:translateY(-5px)}
.medal{width:170px;height:170px;margin:0 auto;
  background-image:url(/images/class-icon-blue.webp);
  background-size:850px 340px;background-repeat:no-repeat;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
/* posicoes (proporcionais ao sprite 1080x425 -> 850x334) */
.medal.warrior-m{background-position:0 0}
.medal.warrior-f{background-position:0 -170px}
.medal.ninja-m{background-position:-170px 0}
.medal.ninja-f{background-position:-170px -170px}
.medal.shura-m{background-position:-340px 0}
.medal.shura-f{background-position:-340px -170px}
.medal.shaman-m{background-position:-512px 0}
.medal.shaman-f{background-position:-512px -170px}
.medal.lycan-m{background-position:-681px 0}
/* Nome + nivel escritos DENTRO da faixa do medalhao (estilo Metin2) */
.tp-medal{position:relative;width:170px;height:170px;margin:0 auto}
.tp-medal .medal{margin:0}
.medal-name{position:absolute;left:0;right:0;bottom:43px;text-align:center;padding:0 40px;
  font-family:var(--ff-display);font-weight:700;font-size:.82rem;letter-spacing:.3px;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(to right,#DD8637 0%,#F7E061 50%,#DD8637 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))}
.medal-level{position:absolute;left:0;right:0;bottom:26px;text-align:center;
  font-family:var(--ff-display);font-weight:600;font-size:.7rem;letter-spacing:.5px;color:#f7e061;opacity:.95;
  text-shadow:0 1px 1px rgba(0,0,0,.8)}
/* brilho que passa ao dar hover */
.tp-medal::after{content:"";position:absolute;inset:6px;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%);
  transform:translateX(-130%);opacity:0}
.tp-card:hover .tp-medal::after{animation:tp-shine .85s ease}
@keyframes tp-shine{0%{transform:translateX(-130%);opacity:1}100%{transform:translateX(130%);opacity:0}}
/* classe abaixo do medalhao */
.tp-class{display:block;margin-top:.5rem;font-size:.72rem;text-transform:uppercase;letter-spacing:2.5px;
  color:var(--accent-2);font-weight:600}
.tp-class .dot{color:var(--gold);margin:0 .35rem}

/* ---- NEWS: cor da tag por categoria ---- */
.news-list .tag.is-event{color:#e0a24a}
.news-list .tag.is-update{color:var(--ok)}
.news-list .tag.is-news{color:var(--accent-2)}

/* ---- Conteudo de artigo (HTML cru do post) ---- */
.article-body{padding:var(--sp-5) var(--sp-4);line-height:1.7}
.article-body img{border-radius:var(--radius);margin:var(--sp-3) 0}
.article-head{padding:var(--sp-5) var(--sp-4);background:linear-gradient(180deg,var(--gold-2),var(--gold));
  color:#241a06}
.article-head h1{font-family:var(--ff-display);margin:0;letter-spacing:1px}
.article-meta{padding:.6rem var(--sp-4);font-size:.8rem;opacity:.85;border-bottom:1px solid var(--line);text-align:right}

/* Lista de posts (categoria) */
.post-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-4);padding:var(--sp-4)}
.post-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface-2);
  display:flex;flex-direction:column;transition:.2s}
.post-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.post-card .thumb{aspect-ratio:16/9;background:#0009 center/cover no-repeat}
.post-card .body{padding:var(--sp-3);display:grid;gap:.3rem}
.post-card .title{font-weight:700}
.post-card .meta{font-size:.78rem;opacity:.75;display:flex;justify-content:space-between}

/* ---- LOJA de creditos (coin packs) ---- */
.coin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-4);padding:var(--sp-4)}
.coin-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);
  text-align:center;padding:var(--sp-4);display:grid;gap:.5rem;transition:.2s;position:relative}
.coin-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.coin-card .coin-icon{width:56px;height:56px;margin:0 auto;object-fit:contain}
.coin-card .amount{font-family:var(--ff-display);font-size:1.5rem;color:var(--gold);font-weight:700}
.coin-card .bonus{font-size:.78rem;color:var(--ok)}
.coin-card .price{font-weight:700}

/* Selo de bonus */
.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.72rem;font-weight:700;
  background:var(--accent-2);color:#04140b}
.badge.pix{background:#22c55e}.badge.paypal{background:#e3c05a;color:#241a06}

/* ---- MENU de conta ---- */
.acct{display:grid;gap:var(--sp-4)}
.acct-balance{padding:var(--sp-4);text-align:center;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241a06;border-radius:var(--radius)}
.acct-balance b{font-family:var(--ff-display);font-size:1.6rem;display:block}
.acct-menu{list-style:none;display:grid;gap:.25rem;padding:var(--sp-3)}
.acct-menu button,.acct-menu a{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  padding:.6rem .8rem;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);
  color:var(--fg);font-size:.9rem;text-decoration:none;transition:.15s}
.acct-menu button:hover,.acct-menu a:hover{border-color:var(--gold);color:var(--gold)}

/* ---- Ranking: imagens de classe/imperio dentro da tabela ---- */
.table td img,.table th img{display:inline-block;max-height:26px;width:auto;vertical-align:middle}
.rank-pos{font-family:var(--ff-display);color:var(--gold);font-weight:700;font-size:1.05rem}

/* ===== RANKING estilo rox: cabecalho detalhado + podio ===== */
.ranking{overflow:visible}
.ranking-head{position:relative;text-align:center;padding:2.3rem 1rem 1.7rem;
  background:
    radial-gradient(130% 130% at 50% -25%, rgba(63,176,240,.24), transparent 55%),
    linear-gradient(180deg, var(--surface-2), rgba(16,42,66,0));
  border-bottom:1px solid var(--line);box-shadow:inset 0 -1px 0 rgba(230,196,99,.22)}
.ranking-head::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.ranking-head h1,.ranking-head h2{font-family:var(--ff-display);letter-spacing:6px;margin:0;color:#fff;
  text-transform:uppercase;font-size:1.9rem;
  text-shadow:0 0 20px rgba(63,176,240,.6),0 2px 4px rgba(0,0,0,.55)}
.ranking-head p{margin:.45rem 0 0;text-transform:uppercase;letter-spacing:3px;font-size:.72rem;color:var(--gold)}
.ranking-head .deco{display:block;margin-top:.5rem;color:var(--gold);letter-spacing:.5rem;opacity:.85}

.ranking-caption{text-align:center;font-size:.85rem;text-transform:uppercase;letter-spacing:3px;
  color:var(--gold);margin:1.3rem 0 .4rem}
.ranking-caption::before{content:"◆ ";color:var(--accent-2)}
.ranking-caption::after{content:" ◆";color:var(--accent-2)}

/* Abas do ranking */
.ranking .tabs-pill{padding:1.2rem 1rem}
.ranking .tabs-pill .btn{min-width:150px}

/* Podio top 3 */
.podium{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;align-items:end;
  padding:1.6rem 1rem 1.9rem;max-width:660px;margin-inline:auto}
.podium li{position:relative;text-align:center;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));padding:2.4rem .5rem 1rem;transition:.25s}
.podium li:hover{transform:translateY(-4px)}
.podium li.p1{order:2;transform:translateY(-18px);border-color:var(--gold);
  box-shadow:0 0 34px -6px rgba(230,196,99,.5)}
.podium li.p1:hover{transform:translateY(-23px)}
.podium li.p2{order:1}
.podium li.p3{order:3}
.podium .crown{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:1.4rem;
  filter:drop-shadow(0 0 7px rgba(230,196,99,.75))}
.podium li.p1 .crown{font-size:2rem;top:-24px}
.podium .avatar{width:78px;height:78px;margin:0 auto .4rem;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:var(--surface);border:2px solid var(--line)}
.podium li.p1 .avatar{width:92px;height:92px;border-color:var(--gold);box-shadow:0 0 20px -2px rgba(230,196,99,.6)}
.podium .avatar img{width:100%;height:100%;object-fit:contain;padding:8px;max-height:none}
/* Avatar com o retrato do medalhao da classe (nome/nivel dentro da faixa) */
.podium .pmedal{width:132px;height:132px;margin:0 auto .3rem;position:relative}
.podium li.p1 .pmedal{width:158px;height:158px}
.podium .pmedal .medal{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.776);
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.podium li.p1 .pmedal .medal{transform:translate(-50%,-50%) scale(0.929)}
/* ajuste fino do texto na faixa (apenas no podio) */
.podium .medal-name{bottom:44px}
.podium .medal-level{bottom:26px}
@media (max-width:520px){
  .podium .pmedal{width:96px;height:96px}
  .podium li.p1 .pmedal{width:112px;height:112px}
  .podium .pmedal .medal{transform:translate(-50%,-50%) scale(0.565)}
  .podium li.p1 .pmedal .medal{transform:translate(-50%,-50%) scale(0.659)}
}
.podium .pos{position:relative;z-index:2;display:inline-grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241a06;font-weight:700;
  font-size:.8rem;margin:-20px auto .35rem;border:2px solid var(--surface)}
.podium .name{display:block;font-weight:700;font-family:var(--ff-display);letter-spacing:.5px;word-break:break-word}
.podium li.p1 .name{color:var(--gold)}
.podium .meta{font-size:.78rem;opacity:.8}

@media (max-width:520px){
  .podium{gap:.4rem;padding:1.2rem .4rem 1.4rem}
  .podium li{padding:2rem .3rem .8rem}
  .podium .avatar{width:58px;height:58px}
  .podium li.p1 .avatar{width:68px;height:68px}
  .ranking-head h1,.ranking-head h2{letter-spacing:3px;font-size:1.4rem}
  .ranking .tabs-pill .btn{min-width:0;flex:1}
}

/* ---- Perfil ---- */
.profile-card{padding:var(--sp-4)}

/* ---- reCAPTCHA centralizado ---- */
.g-recaptcha{display:flex;justify-content:center;margin:.4rem 0}
.captcha-wrap{display:flex;justify-content:center;margin:.4rem 0}

/* ---- Paginacao ---- */
.pager{display:flex;gap:.35rem;justify-content:center;padding:var(--sp-4);flex-wrap:wrap}
.pager a,.pager span{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 .6rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--fg);text-decoration:none}
.pager a:hover{border-color:var(--gold);color:var(--gold)}
.pager .is-active{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241a06;border-color:var(--gold);font-weight:700}

/* ---- Alertas / flash ---- */
.alert{padding:.8rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--line);
  border-left:4px solid var(--accent-2);background:var(--surface-2);margin:var(--sp-3) 0;font-size:.9rem}
.alert.is-error{border-left-color:var(--danger)}
.alert.is-ok{border-left-color:var(--ok)}

/* Utilidades */
.center{text-align:center}
.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.muted{opacity:.75;font-size:.85rem}

/* SweetAlert dark harmoniza com o tema */
.swal2-popup{background:var(--surface)!important;color:var(--fg)!important;border:1px solid var(--line)}

/* ===== AGENDA DE EVENTOS (usado no conteudo do post) ===== */
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin:1.3rem 0}
.ev-card{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;display:grid;gap:.5rem;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));transition:.2s}
.ev-card:hover{transform:translateY(-4px);border-color:var(--accent-2);box-shadow:0 14px 30px -16px var(--accent)}
.ev-head{display:flex;align-items:center;gap:.6rem}
.ev-icon{font-size:1.6rem;line-height:1;filter:drop-shadow(0 0 8px rgba(63,176,240,.5))}
.ev-card h4{margin:0;font-family:var(--ff-display);color:var(--gold);letter-spacing:.5px;font-size:1.08rem}
.ev-line{display:flex;align-items:center;gap:.45rem;font-size:.9rem;color:#dbe8f5}
.ev-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.15rem}
.ev-badge{font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;letter-spacing:.5px;white-space:nowrap}
.ev-badge.x2{background:linear-gradient(180deg,#3fb0f0,#1b93e0);color:#04121a}
.ev-badge.x3{background:linear-gradient(180deg,#f6e3a2,#e3c05a);color:#241a06}
.ev-badge.buff{background:linear-gradient(180deg,#7ee0a0,#3fbf74);color:#062615}
.ev-badge.x100{background:linear-gradient(180deg,#ffb04a,#ff6b6b);color:#2a0a0a}
.ev-badge.gm{background:rgba(159,111,250,.22);border:1px solid #9f6ffa;color:#cbb6ff}
.ev-badge.vale{background:rgba(95,212,138,.18);border:1px solid #5fd48a;color:#bff0d0}
.ev-badge.random{background:linear-gradient(180deg,#c9a3ff,#9f6ffa);color:#180a2e}
.ev-badge.soon{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#aebccf}