/* Complemento da landing (Fatia 1 do painel): estilos das novas peças que não
   existiam no site.css original — a chamada de criar conta e os botões de
   download em espelho. Servido de /assets (style-src 'self'), sem tocar o
   site.css original. */

.register-benefits {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.register-benefits li {
  position: relative;
  padding-left: 26px;
  color: #cfc7dd;
  font-size: 14px;
  line-height: 1.5;
}
.register-benefits li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: #c084fc;
}

.register-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.register-cta .button {
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
}

/* Botão desabilitado (link de download ainda não configurado). */
.button.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}

/* Espaço entre os dois botões de download no cartão. */
.download-body .button + .button {
  margin-top: 10px;
}

/* =====================================================================
   Navbar estilo "Classic Games" com tema MIR4 (violeta + dourado).
   Substitui o .site-header antigo; reaproveita data-header/data-nav/
   data-nav-toggle do site.js (classes .is-open / .is-scrolled).
   ===================================================================== */
:root{
  --gold-1:#e7c66b; --gold-2:#c8992f; --ink:#0b0713;
}
.tc-header{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(16,9,26,.98), rgba(9,5,16,.98));
  border-bottom:1px solid rgba(199,153,60,.35);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.tc-header.is-scrolled{ background:rgba(9,5,16,.99); }
.tc-bar{
  display:flex; align-items:center; gap:22px;
  padding:10px 26px; width:100%;
}
.tc-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.tc-brand img{ height:42px; width:auto; display:block; }
.tc-brand-text{ font-family:'Balthazar',serif; font-size:20px; letter-spacing:.04em; color:#fff; }
.tc-brand-text b{ background:linear-gradient(90deg,#8b5cf6,#c084fc);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

.tc-nav{ display:flex; align-items:center; gap:26px; margin-left:14px; flex:1; }
.tc-nav > a, .tc-drop-toggle{
  color:#e7e2f0; text-transform:uppercase; letter-spacing:.07em; font-size:13.5px;
  font-weight:600; text-decoration:none; background:none; border:0; cursor:pointer;
  font-family:'Poppins',sans-serif; padding:6px 0; white-space:nowrap; transition:.15s;
}
.tc-nav > a:hover, .tc-drop-toggle:hover{ color:var(--gold-1); }
.tc-caret{ font-size:10px; opacity:.8; }

/* dropdown só com CSS (hover no desktop, foco/tap no mobile) */
.tc-drop{ position:relative; }
.tc-drop-menu{
  position:absolute; top:calc(100% + 8px); left:-14px; min-width:190px;
  background:linear-gradient(180deg,#160d24,#0c0716); border:1px solid rgba(199,153,60,.3);
  border-radius:12px; padding:8px; display:none; flex-direction:column; gap:2px;
  box-shadow:0 20px 50px rgba(0,0,0,.55);
}
.tc-drop:hover .tc-drop-menu, .tc-drop:focus-within .tc-drop-menu{ display:flex; }
.tc-drop-menu a{
  color:#cfc7dd; text-decoration:none; font-size:13.5px; padding:9px 12px; border-radius:8px;
}
.tc-drop-menu a:hover{ background:rgba(139,92,246,.16); color:#fff; }

/* busca */
.tc-search{ display:flex; align-items:center; margin-left:auto; }
.tc-search input{
  width:210px; background:#100a1c; border:1px solid rgba(199,153,60,.3); border-right:0;
  border-radius:999px 0 0 999px; padding:9px 16px; color:#ece9f5; font-size:13.5px;
  font-family:'Poppins',sans-serif; outline:none;
}
.tc-search input::placeholder{ color:#8a819c; }
.tc-search input:focus{ border-color:rgba(199,153,60,.6); }
.tc-search button{
  display:grid; place-items:center; width:42px; height:38px; border:0; cursor:pointer;
  color:var(--ink); background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  border-radius:0 999px 999px 0;
}
.tc-search button:hover{ filter:brightness(1.06); }

.tc-flag{ display:inline-flex; flex-shrink:0; }
.tc-flag svg{ display:block; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.08); }

.tc-panel-btn{
  display:inline-flex; align-items:center; gap:9px; flex-shrink:0;
  padding:10px 20px; border-radius:10px; text-decoration:none;
  text-transform:uppercase; letter-spacing:.06em; font-size:13px; font-weight:700;
  color:var(--ink); background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  box-shadow:0 6px 18px rgba(200,153,47,.35); transition:.15s; white-space:nowrap;
}
.tc-panel-btn:hover{ filter:brightness(1.07); box-shadow:0 8px 24px rgba(200,153,47,.5); color:var(--ink); }
.tc-panel-badge{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:#fff; background:linear-gradient(135deg,#8b5cf6,#c084fc);
}

.tc-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.tc-toggle span:not(.sr-only){ width:24px; height:2px; background:var(--gold-1); border-radius:2px; }

@media (max-width:980px){
  .tc-bar{ flex-wrap:wrap; gap:14px; padding:10px 16px; }
  .tc-toggle{ display:flex; margin-left:auto; order:2; }
  .tc-flag{ order:3; }
  .tc-panel-btn{ order:4; }
  .tc-nav{
    order:5; flex-basis:100%; flex-direction:column; align-items:stretch; gap:4px;
    margin:0; max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .tc-nav.is-open{ max-height:560px; padding-top:8px; }
  .tc-nav > a, .tc-drop-toggle{ padding:12px 4px; border-bottom:1px solid rgba(139,92,246,.12); }
  .tc-drop-menu{ position:static; display:flex; box-shadow:none; border:0; padding:0 0 0 14px; background:none; }
  .tc-search{ margin:8px 0 0; }
  .tc-search input{ flex:1; }
}

/* =====================================================================
   Downloads por plataforma (Windows / Android)
   ===================================================================== */
.dl-card{ display:block !important; }
.dl-plat{ border-top:1px solid var(--line); padding:16px 0 4px; margin-top:10px; }
.dl-plat:first-of-type{ border-top:0; }
.dl-plat-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.dl-tag{
  display:inline-flex; align-items:center; gap:7px; padding:5px 13px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.dl-tag::before{ content:""; width:8px; height:8px; border-radius:50%; }
.dl-tag.win{ background:rgba(30,144,255,.14); color:#8ec5ff; }
.dl-tag.win::before{ background:#1e90ff; }
.dl-tag.android{ background:rgba(61,220,132,.14); color:#8ef0b4; }
.dl-tag.android::before{ background:#3ddc84; }
.dl-plat-meta{ color:#9aa3b2; font-size:12.5px; }
.dl-links{ display:flex; gap:10px; flex-wrap:wrap; }
.dl-links .button{ flex:1 1 auto; justify-content:center; min-width:160px; }

/* =====================================================================
   Notícias
   ===================================================================== */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.news-card{
  background:linear-gradient(135deg,rgba(20,10,30,.9),rgba(10,6,18,.9));
  border:1px solid rgba(139,92,246,.2); border-radius:14px; padding:22px;
}
.news-card.has-thumb{ padding:0; overflow:hidden; }
.news-card.has-thumb > :not(.news-thumb){ margin-left:22px; margin-right:22px; }
.news-card.has-thumb > h3{ margin-top:14px; }
.news-card.has-thumb > .news-more, .news-card.has-thumb > .news-summary{ margin-bottom:16px; }
.news-thumb{ width:100%; aspect-ratio:16/9; overflow:hidden; background:#0d0916; }
.news-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.news-card.has-thumb .news-date{ margin-top:14px; }
.news-card h3{ margin:6px 0 8px; font-size:19px; color:#fff; }
.news-date{
  display:inline-block; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:#c8992f; font-weight:700;
}
.news-summary{ color:#b7afc6; font-size:14px; line-height:1.6; margin:0 0 10px; }
.news-more summary{
  cursor:pointer; color:#c084fc; font-size:13.5px; font-weight:600; list-style:none;
}
.news-more summary::-webkit-details-marker{ display:none; }
.news-more summary::after{ content:" ↓"; }
.news-more[open] summary::after{ content:" ↑"; }
.news-body{ color:#cfc7dd; font-size:14px; line-height:1.7; margin-top:10px;
  border-top:1px solid rgba(139,92,246,.18); padding-top:10px; }
.news-empty{ color:#9aa3b2; text-align:center; padding:30px; border:1px dashed rgba(139,92,246,.25); border-radius:14px; }

/* =====================================================================
   Marketplace — cartões de personagem (estilo mir4collection.com)
   ===================================================================== */
.market-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:18px; }
.mkc{ position:relative; background:linear-gradient(180deg,#160d24,#0c0716);
  border:1px solid rgba(139,92,246,.22); border-radius:16px; overflow:hidden; transition:.15s; }
.mkc:hover{ border-color:rgba(199,153,60,.55); transform:translateY(-3px); box-shadow:0 18px 44px rgba(0,0,0,.5); }
.mkc-rank{ position:absolute; top:10px; left:10px; z-index:2; background:rgba(11,7,19,.82);
  color:#e7c66b; font-weight:700; font-size:12px; padding:3px 10px; border-radius:999px;
  border:1px solid rgba(199,153,60,.45); }
.mkc-art{ position:relative; aspect-ratio:1/1; overflow:hidden;
  background:radial-gradient(circle at 50% 28%, rgba(139,92,246,.38), transparent 68%), linear-gradient(180deg,#1b1032,#0d0916); }
.mkc-art img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.mkc-badge{ position:absolute; top:10px; right:10px; z-index:2; font-size:10.5px; padding:3px 10px; border-radius:999px; }
.mkc-badge.on{ background:rgba(34,197,94,.2); color:#8ef0b4; }
.mkc-badge.off{ background:rgba(0,0,0,.5); color:#b7afc6; }
.mkc-body{ padding:14px 16px 18px; }
.mkc-class{ color:#c084fc; font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:600; }
.mkc-name{ color:#fff; font-size:17px; margin:3px 0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mkc-power{ display:flex; align-items:baseline; gap:7px; }
.mkc-power-ico{ color:#c8992f; }
.mkc-power b{ font-size:22px; color:#fff; font-weight:700; }
.mkc-power-lbl{ color:#9aa3b2; font-size:11.5px; }
.mkc-meta{ margin-top:8px; color:#9aa3b2; font-size:12.5px; }
.mkc-meta b{ color:#e7e2f0; }
.mkc{ cursor:pointer; }

/* --- página /marketplace --- */
.mk-page{ padding:40px 0 70px; min-height:70vh; }
.tc-nav-active{ color:#e7c66b !important; }
.mk-filters{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:20px 0 26px; }
.mk-filters input[type="search"], .mk-filters select{
  background:#100a1c; border:1px solid rgba(139,92,246,.28); border-radius:10px;
  padding:10px 14px; color:#ece9f5; font:inherit; font-size:14px; }
.mk-filters input[type="search"]{ min-width:220px; flex:1 1 220px; max-width:320px; }
.mk-filters input:focus, .mk-filters select:focus{ outline:none; border-color:rgba(199,153,60,.6); }
.mk-online{ display:flex; align-items:center; gap:7px; color:#cfc7dd; font-size:14px; cursor:pointer; }
.mk-online input{ accent-color:#8b5cf6; }
.mk-count{ margin-left:auto; color:#9aa3b2; font-size:13px; }
.market-grid.is-loading{ opacity:.5; transition:.15s; }
.mk-pager{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:30px; }
.mk-pg{ background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.3); color:#ece9f5;
  border-radius:9px; padding:9px 16px; cursor:pointer; font:inherit; font-size:13.5px; }
.mk-pg:hover:not([disabled]){ border-color:#c8992f; color:#fff; }
.mk-pg[disabled]{ opacity:.4; cursor:default; }
.mk-pg-info{ color:#9aa3b2; font-size:13px; }

/* --- modal de detalhe --- */
.mk-modal[hidden]{ display:none; }
.mk-modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.mk-modal-backdrop{ position:absolute; inset:0; background:rgba(5,3,10,.72); backdrop-filter:blur(3px); }
.mk-modal-card{ position:relative; z-index:1; width:min(640px,100%); max-height:88vh; overflow:auto;
  background:linear-gradient(180deg,#160d24,#0c0716); border:1px solid rgba(199,153,60,.4);
  border-radius:18px; padding:26px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.mk-modal-x{ position:absolute; top:14px; right:14px; background:none; border:0; color:#9aa3b2; font-size:18px; cursor:pointer; }
.mk-modal-x:hover{ color:#fff; }
.mk-loading{ color:#9aa3b2; text-align:center; padding:24px; }
.mk-det-head{ display:flex; gap:18px; align-items:center; margin-bottom:8px; }
.mk-det-art{ width:96px; height:96px; border-radius:14px; overflow:hidden; flex-shrink:0;
  background:radial-gradient(circle at 50% 30%, rgba(139,92,246,.4), transparent 70%), #0d0916; }
.mk-det-art img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.mk-det-head h2{ color:#fff; font-size:22px; margin:4px 0 8px; }
.mk-det-stats{ display:flex; gap:18px; flex-wrap:wrap; color:#9aa3b2; font-size:13px; }
.mk-det-stats b{ color:#e7c66b; font-family:'Poppins',sans-serif; }
.mk-det-eqt{ color:#fff; font-size:16px; margin:22px 0 12px; padding-top:16px; border-top:1px solid rgba(139,92,246,.2); }
.mk-eq-list{ display:grid; gap:8px; }
.mk-eq{ display:flex; align-items:center; gap:10px; background:rgba(139,92,246,.06);
  border:1px solid rgba(139,92,246,.18); border-radius:10px; padding:11px 14px; }
.mk-eq-name{ color:#ece9f5; font-size:14px; flex:1; }
.mk-eq-ref{ background:linear-gradient(180deg,#e7c66b,#c8992f); color:#1a1206; font-weight:700;
  font-size:12px; padding:2px 8px; border-radius:6px; }
.mk-eq-slot{ color:#9aa3b2; font-size:11.5px; }

/* --- página do personagem --- */
.mk-back{ display:inline-block; color:#c084fc; font-size:14px; margin-bottom:18px; }
.mk-hero{ display:flex; gap:24px; align-items:center; flex-wrap:wrap;
  background:linear-gradient(135deg,#160d24,#0c0716); border:1px solid rgba(199,153,60,.3);
  border-radius:18px; padding:24px; margin-bottom:26px; }
.mk-hero-art{ width:150px; height:150px; border-radius:16px; overflow:hidden; flex-shrink:0;
  background:radial-gradient(circle at 50% 28%, rgba(139,92,246,.4), transparent 70%), #0d0916; }
.mk-hero-art img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.mk-hero-info{ flex:1; min-width:240px; }
.mk-hero-info h1{ color:#fff; font-size:28px; margin:4px 0 14px; }
.mk-hero-stats{ display:flex; gap:26px; flex-wrap:wrap; margin-bottom:16px; }
.mk-stat{ display:flex; flex-direction:column; }
.mk-stat span{ color:#9aa3b2; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; }
.mk-stat b{ color:#e7c66b; font-size:20px; font-weight:700; }
.mk-share{ cursor:pointer; }

.mk-eq-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.mk-eqc{ background:rgba(139,92,246,.05); border:1px solid rgba(139,92,246,.18); border-radius:14px;
  padding:14px; text-align:center; transition:.15s; }
.mk-eqc:hover{ transform:translateY(-2px); }
.mk-eqc-ic{ position:relative; width:72px; height:72px; margin:0 auto 10px; border-radius:12px;
  background:#0d0916; display:grid; place-items:center; overflow:hidden; }
.mk-eqc-ic img{ width:100%; height:100%; object-fit:contain; }
.mk-eqc-ref{ position:absolute; bottom:4px; right:4px; background:linear-gradient(180deg,#e7c66b,#c8992f);
  color:#1a1206; font-weight:700; font-size:11px; padding:1px 6px; border-radius:6px; }
.mk-eqc-nm{ color:#ece9f5; font-size:12.5px; line-height:1.35; min-height:34px; }
.mk-eqc-slot{ color:#9aa3b2; font-size:11px; margin-top:5px; }
/* cores por grade (raridade) */
.mk-eqc.g1{ border-color:rgba(154,163,178,.4); }
.mk-eqc.g2{ border-color:rgba(52,199,89,.45); }
.mk-eqc.g3{ border-color:rgba(59,130,246,.5); }
.mk-eqc.g4{ border-color:rgba(168,85,247,.55); box-shadow:0 0 18px rgba(168,85,247,.12); }
.mk-eqc.g5{ border-color:rgba(231,198,107,.6); box-shadow:0 0 18px rgba(231,198,107,.14); }
.mk-eqc.g6{ border-color:rgba(255,94,58,.6); box-shadow:0 0 18px rgba(255,94,58,.14); }
.mk-eqc.g1 .mk-eqc-ic{ box-shadow:inset 0 0 0 1px rgba(154,163,178,.3); }
.mk-eqc.g4 .mk-eqc-ic, .mk-eqc.g5 .mk-eqc-ic, .mk-eqc.g6 .mk-eqc-ic{ box-shadow:inset 0 0 20px rgba(255,255,255,.05); }

/* Cabeçalho logado: nome + avatar como atalho para o painel. */
.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.10);
  font-weight: 600;
  transition: 0.15s;
}
.nav-account:hover {
  border-color: rgba(192, 132, 252, 0.7);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.18);
}
.nav-user-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #c084fc);
}

/* ---------------------------------------------------------------------------
   Faixa de estado do servidor (painel admin › Site › O que está no ar).
   Fica acima do cabeçalho: é a primeira coisa que o jogador precisa saber
   quando o servidor cai.
   --------------------------------------------------------------------------- */
.site-status{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 22px; font-size:13px; line-height:1.4;
  background:linear-gradient(90deg,rgba(34,197,94,.16),rgba(34,197,94,.04));
  border-bottom:1px solid rgba(34,197,94,.28); color:#e6f7ec;
}
.site-status b{ color:#fff; letter-spacing:.4px; }
.site-status__dot{
  width:8px; height:8px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 10px rgba(34,197,94,.9);
}
.site-status__msg{ color:rgba(255,255,255,.78); }
.site-status__msg::before{ content:"•"; margin-right:10px; opacity:.5; }
.site-status.is-down{
  background:linear-gradient(90deg,rgba(208,96,47,.22),rgba(208,96,47,.05));
  border-bottom-color:rgba(208,96,47,.4); color:#ffe3d4;
}
.site-status.is-down .site-status__dot{ background:#f97316; box-shadow:0 0 10px rgba(249,115,22,.9); }