/* ============================================================================
   Questers World — Tema "ARENA" (esports / gaming)
   Reformulação: caixa-alta condensada, angular, neon. Camada sobre styles.css.
   ========================================================================== */

/* ---------- Fontes ---------- */
@font-face{font-family:'Rajdhani';font-weight:500;font-display:swap;src:url('assets/fonts/Rajdhani-500-latin.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-weight:600;font-display:swap;src:url('assets/fonts/Rajdhani-600-latin.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-weight:700;font-display:swap;src:url('assets/fonts/Rajdhani-700-latin.woff2') format('woff2');}
@font-face{font-family:'Saira';font-weight:400;font-display:swap;src:url('assets/fonts/Saira-400-latin.woff2') format('woff2');}
@font-face{font-family:'Saira';font-weight:500;font-display:swap;src:url('assets/fonts/Saira-500-latin.woff2') format('woff2');}
@font-face{font-family:'Saira';font-weight:600;font-display:swap;src:url('assets/fonts/Saira-600-latin.woff2') format('woff2');}
@font-face{font-family:'Saira';font-weight:700;font-display:swap;src:url('assets/fonts/Saira-700-latin.woff2') format('woff2');}

/* ---------- Tokens ---------- */
:root{
  --ink:#06070e; --night:#0a0d1a; --panel-solid:#0b1020;
  --panel:rgba(10,14,28,.86);
  --text:#eef3ff; --muted:#8b96b4;
  --cyan:#22e3ff;      /* neon principal (asas de cristal) */
  --magenta:#ff2f8e;   /* neon secundário (traje) */
  --gold:#f6c445;      /* premium/marca */
  --green:#37e5a0; --red:#ff4d6a;
  --line:rgba(34,227,255,.22);
  --blue-line:rgba(34,227,255,.18);
  --font-head:'Rajdhani','Arial Narrow',system-ui,sans-serif;
  --font-body:'Saira','Segoe UI',system-ui,sans-serif;
}

/* ---------- Base ---------- */
body{
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(1200px 620px at 82% -6%, rgba(34,227,255,.10), transparent 60%),
    radial-gradient(900px 560px at 8% 110%, rgba(255,47,142,.10), transparent 60%),
    linear-gradient(180deg, rgba(4,5,12,.72), rgba(4,5,12,.97) 78%),
    url("assets/bg_ft.png") center top / cover fixed,
    var(--ink);
}
/* textura de grade tech por cima do fundo */
body::after{
  background:
    repeating-linear-gradient(90deg, rgba(34,227,255,.045) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(34,227,255,.045) 0 1px, transparent 1px 64px),
    linear-gradient(90deg, rgba(4,5,12,.82), rgba(4,5,12,.30) 45%, rgba(4,5,12,.84));
}

h1,h2,h3{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1;}
p{font-family:var(--font-body);}

/* ---------- Eyebrow como tag angular ---------- */
.eyebrow{
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.28em;font-size:12px;color:var(--cyan);
  display:inline-flex;align-items:center;gap:.6em;
  padding:5px 14px 4px;
  background:rgba(34,227,255,.09);
  border:1px solid rgba(34,227,255,.35);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.eyebrow::before{content:"//";color:var(--magenta);font-weight:700;letter-spacing:0;}

/* ---------- Header ---------- */
.site-header{
  background:linear-gradient(90deg, rgba(6,7,14,.96), rgba(9,13,26,.9), rgba(6,7,14,.96));
  border-bottom:1px solid rgba(34,227,255,.14);
}
.site-header::after{background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent);opacity:.7;height:2px;}
.brand span{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.site-nav a{
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:14px;color:var(--muted);
}
.site-nav a:hover{color:var(--text);}
/* item ativo com barra neon */
.site-nav a.active,.site-nav a[aria-current="true"]{color:var(--cyan);}

/* ---------- HERO reformulado ---------- */
.hero-content{position:relative;z-index:2;max-width:680px;}
.hero .eyebrow{margin-bottom:18px;}
.hero h1{
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  font-size:clamp(64px,9.5vw,132px);line-height:.86;letter-spacing:.005em;
  margin:0 0 10px;
  color:#fff;
  text-shadow:0 0 26px rgba(34,227,255,.28),0 6px 30px rgba(0,0,0,.7);
}
/* segunda palavra em neon (via ::after com o texto duplicado não dá; uso gradient no todo) */
.hero h1{
  background:linear-gradient(92deg,#ffffff 0%,#d6f7ff 40%,var(--cyan) 72%,var(--magenta) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.hero h1{color:#fff;-webkit-text-fill-color:#fff;}}
.hero p{font-family:var(--font-body);font-size:18px;line-height:1.6;color:var(--muted);max-width:560px;
  border-left:2px solid var(--magenta);padding-left:16px;}

/* botões angulares */
.primary-button,.secondary-button{
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  min-height:54px;border-radius:0;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 100%,16px 100%);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,background .16s ease;
}
.primary-button{
  color:#05121a;
  background:linear-gradient(120deg,var(--cyan),#7ef0ff 55%,var(--cyan));
  border:0;
  box-shadow:0 0 0 1px rgba(34,227,255,.6),0 10px 30px rgba(34,227,255,.3);
}
.primary-button:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--cyan),0 14px 40px rgba(34,227,255,.5);filter:brightness(1.05);}
.secondary-button{
  color:var(--text);background:rgba(255,47,142,.08);
  border:1px solid rgba(255,47,142,.5);
}
.secondary-button:hover{transform:translateY(-2px);background:rgba(255,47,142,.16);border-color:var(--magenta);box-shadow:0 10px 30px rgba(255,47,142,.25);}

/* barra de STATS do hero (injetada no HTML do preview) */
.hero-statbar{
  position:absolute;left:7vw;right:7vw;bottom:34px;z-index:3;
  display:flex;flex-wrap:wrap;gap:0;
  border:1px solid rgba(34,227,255,.22);
  background:linear-gradient(90deg,rgba(8,11,22,.9),rgba(8,11,22,.72));
  backdrop-filter:blur(8px);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 100%,18px 100%);
}
.hero-statbar .stat{
  flex:1 1 0;min-width:130px;padding:14px 22px;
  border-right:1px solid rgba(34,227,255,.14);
  display:flex;flex-direction:column;gap:2px;
}
.hero-statbar .stat:last-child{border-right:0;}
.hero-statbar .stat b{font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--cyan);text-transform:uppercase;line-height:1;}
.hero-statbar .stat span{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.hero-statbar .stat.live b{color:var(--green);}
.hero-status{display:none;} /* substituído pela statbar */

/* brilho neon atrás do personagem */
.hero-character::after{
  content:"";position:absolute;inset:-8% -6% -2% -10%;z-index:-1;
  background:radial-gradient(52% 60% at 60% 42%, rgba(34,227,255,.34), transparent 62%),
             radial-gradient(46% 52% at 44% 66%, rgba(255,47,142,.28), transparent 64%);
  filter:blur(6px);
}

/* ---------- Section headings ---------- */
.section-heading .eyebrow{margin-bottom:14px;}
.section-heading h2,.roadmap-hero-copy h2{
  font-family:var(--font-head);text-transform:uppercase;font-weight:700;
  font-size:clamp(30px,4.4vw,52px);letter-spacing:.01em;
}
.section-heading h2::before,.roadmap-hero-copy h2::before{
  content:"";display:block;width:52px;height:3px;margin-bottom:14px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
}

/* ---------- Cards angulares + neon ---------- */
.roadmap-overview article,.roadmap-feature-showcase article,.info-grid article,
.download-card,.play-panel,.support-panel,.roadmap-loader,.account-callout,
.discord-panel,.season-content{
  border:1px solid rgba(34,227,255,.16);
  background:linear-gradient(180deg,rgba(12,16,32,.9),rgba(8,11,22,.9));
}
.roadmap-overview article,.roadmap-feature-showcase article,.info-grid article,.download-card{
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  position:relative;
}
.roadmap-overview article::before,.roadmap-feature-showcase article::before,
.info-grid article::before,.download-card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent 70%);
}
.roadmap-overview article:hover,.roadmap-feature-showcase article:hover,
.info-grid article:hover,.download-card:hover{
  transform:translateY(-4px);border-color:var(--cyan);
  box-shadow:0 18px 46px rgba(0,0,0,.5),0 0 0 1px rgba(34,227,255,.4),0 0 28px rgba(34,227,255,.18);
}
.season-marker span,.download-icon,.account-benefits strong{
  font-family:var(--font-head);font-weight:700;color:var(--cyan);
  text-shadow:0 0 16px rgba(34,227,255,.5);
}
.season-content h3,.info-grid h3,.download-card h3,.account-copy h3,.discord-panel-head h3,.roadmap-vision h3{
  font-family:var(--font-head);text-transform:uppercase;font-weight:700;letter-spacing:.02em;
}
.season-kicker,.roadmap-load-labels span,.server-stats span{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-weight:600;
}
.status-dot{background:var(--green);box-shadow:0 0 0 6px rgba(55,229,160,.14),0 0 20px rgba(55,229,160,.6);}

/* ---------- Movimento ---------- */
@keyframes arena-rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
.hero.active .eyebrow{animation:arena-rise .6s .05s both cubic-bezier(.2,.8,.2,1);}
.hero.active h1{animation:arena-rise .7s .16s both cubic-bezier(.2,.8,.2,1);}
.hero.active .hero-content p{animation:arena-rise .6s .3s both cubic-bezier(.2,.8,.2,1);}
.hero.active .hero-actions{animation:arena-rise .6s .42s both cubic-bezier(.2,.8,.2,1);}
.hero.active .hero-statbar{animation:arena-rise .6s .54s both cubic-bezier(.2,.8,.2,1);}

@media (prefers-reduced-motion:reduce){
  .hero.active .eyebrow,.hero.active h1,.hero.active .hero-content p,
  .hero.active .hero-actions,.hero.active .hero-statbar{animation:none;}
}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .hero-statbar{position:static;margin-top:26px;left:auto;right:auto;}
  .hero p{max-width:none;}
}
@media (max-width:560px){
  .hero-statbar{flex-direction:column;}
  .hero-statbar .stat{border-right:0;border-bottom:1px solid rgba(34,227,255,.14);}
}

/* ---------- Nav ativo + botão Entrar angulares ---------- */
.site-nav a.active{
  color:#05121a;
  background:linear-gradient(120deg,var(--cyan),#7ef0ff);
  border:0;border-radius:0;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  box-shadow:0 0 18px rgba(34,227,255,.45);
  text-shadow:none;
}
.ghost-button:not(.danger){
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-radius:0;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.account-label,.account-copy-mini small{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;}
.account-copy-mini small{color:var(--cyan);}

/* ==================== AJUSTES DO FEEDBACK ==================== */

/* 1) pé do personagem por cima da barra de stats */
.hero-character{z-index:4;}
.hero-statbar{z-index:3;}

/* 2) roadmap: personagem à ESQUERDA, texto à DIREITA */
.roadmap-hero{grid-template-columns:minmax(280px,1fr) minmax(0,760px);}
.roadmap-hero-copy{grid-column:2;grid-row:1;}
.roadmap-hero-character{grid-column:1;grid-row:1;justify-self:start;}

/* 3) Links rápidos REAIS (no lugar da imagem cortada) */
.quick-links{display:flex;flex-direction:column;gap:10px;height:100%;}
.quick-links .eyebrow{margin-bottom:6px;align-self:flex-start;}
.quick-link{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 15px;text-decoration:none;cursor:pointer;
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text);font-size:15px;
  background:linear-gradient(90deg,rgba(34,227,255,.09),rgba(34,227,255,.02));
  border:1px solid rgba(34,227,255,.22);border-radius:0;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 100%,10px 100%);
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.quick-link:hover{transform:translateX(3px);border-color:var(--cyan);
  background:linear-gradient(90deg,rgba(34,227,255,.2),rgba(34,227,255,.05));box-shadow:0 0 18px rgba(34,227,255,.22);}
.quick-link .qi{width:15px;height:15px;flex:none;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 9px rgba(34,227,255,.55);}
.quick-link .qa{margin-left:auto;color:var(--cyan);font-size:22px;line-height:1;font-weight:700;}

/* 4) Modal de boas-vindas do Discord */
.discord-welcome{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;}
.discord-welcome[hidden]{display:none;}
.dw-backdrop{position:absolute;inset:0;background:rgba(4,6,14,.82);backdrop-filter:blur(6px);}
.dw-card{
  position:relative;z-index:1;width:min(440px,92vw);padding:36px 30px 26px;text-align:center;
  background:linear-gradient(180deg,rgba(12,16,32,.98),rgba(8,11,22,.98));
  border:1px solid rgba(34,227,255,.35);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 40px rgba(34,227,255,.16);
  animation:dw-in .3s ease both;
}
@keyframes dw-in{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:none;}}
.dw-icon{display:block;width:58px;height:58px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 28px rgba(34,227,255,.5);}
.discord-welcome .eyebrow{margin-bottom:14px;}
.dw-card h2{font-family:var(--font-head);text-transform:uppercase;font-size:30px;line-height:1;margin:0 0 12px;color:#fff;}
.dw-card p{color:var(--muted);font-size:15px;line-height:1.55;margin:0 0 24px;}
.dw-card .primary-button{width:100%;text-decoration:none;}
.dw-later{display:block;width:100%;margin-top:14px;background:none;border:0;color:var(--muted);
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;font-size:12px;cursor:pointer;}
.dw-later:hover{color:var(--text);}
.dw-close{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;}
.dw-close:hover{color:var(--cyan);}

/* ==================== AJUSTES FINAIS (2) ==================== */
/* roadmap: pé do personagem por cima da linha dos cards */
.roadmap-hero{overflow:visible;}
.roadmap-hero-character{z-index:6;margin-bottom:-44px;}
.roadmap-overview{position:relative;z-index:1;}

/* ícone do usuário modernizado: hexágono neon */
.user-medallion{
  border-radius:0;border:1px solid rgba(34,227,255,.55);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(180deg,rgba(34,227,255,.16),rgba(10,14,28,.94));
  box-shadow:0 0 16px rgba(34,227,255,.3),inset 0 0 10px rgba(34,227,255,.12);
}
.user-medallion::after{display:none;}
.user-medallion svg{stroke:var(--cyan);}

/* modal: logo no lugar do cristal */
.dw-logo{display:block;width:74px;height:74px;object-fit:contain;margin:0 auto 14px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(34,227,255,.35));}