/* ===== BASE ===================================================== */
:root{
  --bg:#f7f8fb;
  --ink:#1a1d28;
  --muted:#606b84;
  --muted2:#7b86a1;
  --panel:#ffffff;
  --panel2:#fafbff;
  --line:#e6e9f2;
  --gold:#ffb300;
  --gold2:#ffd35a;
  --gold3:#ffe9a6;
  --hot:#ff5d5d;
  --cool:#4aa8ff;
  --ok:#22c55e;
  --shadow:0 10px 30px rgba(10,20,60,.06),0 2px 10px rgba(10,20,60,.04);
  --shadow-soft:0 6px 14px rgba(10,20,60,.06);
  --radius:16px;
  --fz-hero:clamp(34px,6vw,50px);
  --fz-sec:clamp(20px,3vw,28px);
  --fz:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);
  background:var(--bg);
  font-size:var(--fz);
}

/* ===== HEADER =================================================== */
.sbb-header{
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.sbb-header .left{justify-self:start}
.sbb-header .right{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.hamburger,
.ghost{
  height:40px;
  width:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.hamburger i{font-size:18px;color:var(--ink)}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand .crown,
.brand-mini .crown{
  background:url('/img/fsblogo.png') center/contain no-repeat;
}
.brand-mini::after {
  content: "";
  font-size: 16px;
  margin-left: 6px;
  color: var(--ink);
}

body:not(.theme-light) .brand-mini::after {
  color: var(--ink);
}

.brand .crown{width:42px;height:42px}
.brand .wordmark{
  font-weight:800;
  letter-spacing:.2px;
  color:var(--ink);
}

.brand .wordmark::after {
  content: "Federação Space Bounce";
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  margin-left: 8px;
  letter-spacing: -0.3px;
}

body:not(.theme-light) .brand .wordmark::after {
  color: var(--ink);
}


/* ===== CHIPS / BOTÕES / PILLS / TABS ============================ */
.chip,
.pill,
.tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
}
.chip-gold{
  background:linear-gradient(90deg,var(--gold3),var(--gold2));
  border:none;
  color:#2b2b2b;
  box-shadow:0 8px 22px rgba(255,179,0,.18);
}
.pill{
  padding:8px 12px;
  height:auto;
}
.btn{
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:none;
  background:linear-gradient(90deg,var(--gold2),var(--gold));
  color:#2b2b2b;
  font-weight:800;
  cursor:pointer;
}
.ghost{color:#222}

/* ===== TICKER =================================================== */
.ticker{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.ticker .marquee{
  white-space:nowrap;
  animation:mar 28s linear infinite;
  padding:10px 0 12px;
  color:var(--muted);
}
@keyframes mar{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-50%)}
}
.tag{
  display:inline-block;
  padding:3px 8px;
  margin:0 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid var(--line);
  background:#fff;
}
.tag.gold{
  background:#fff7e1;
  border-color:#ffe6a8;
  color:#9c6a00;
}
.tag.tip{
  background:#edf7ff;
  border-color:#d8ecff;
  color:#2463a9;
}
.tag.event{
  background:#ffefef;
  border-color:#ffd2d2;
  color:#b82222;
}

/* ===== HERO GENÉRICO (estrutura básica) ======================== */
.hero{
  max-width:1200px;
  margin:24px auto;
  padding:0 14px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
}
.hero-copy h1{
  font-size:var(--fz-hero);
  margin:.1em 0;
}
.hero-copy p,
.hero-copy .hero-sub{
  margin:.2em 0 1em;
  color:var(--muted);
}
.hero-copy .hero-sub{margin:.3rem 0 1.2rem}
.hero-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cta-primary,
.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
}
.cta-primary{
  background:linear-gradient(90deg,var(--gold2),var(--gold));
  color:#2b2b2b;
  box-shadow:0 10px 28px rgba(255,179,0,.18);
}
.cta{
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
}

/* ===== SEÇÕES GERAIS ============================================ */
.section{
  max-width:1200px;
  margin:22px auto;
  padding:0 14px;
}
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.section-head h2{
  font-size:var(--fz-sec);
  margin:0;
}
.section-head .tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.tab{cursor:pointer}
.tab.is-active{
  border-color:#ffd35a;
  color:#2b2b2b;
  background:linear-gradient(90deg,#fff7e1,#fff);
}
.link,.minilink{
  color:#6a5a00;
  font-weight:700;
  text-decoration:none;
}
.minilink{font-size:13px}
.tight{margin-bottom:6px}

/* ===== GRIDS GENÉRICOS ========================================== */
.grid-3{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.grid-2{
  display:grid;
  gap:14px;
  grid-template-columns:1.1fr .9fr;
}
@media (max-width:1024px){
  .hero{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid-3{grid-template-columns:1fr}
}

/* ===== TABELA RANKING / TABELA GENÉRICA ======================== */
.table-wrap{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.rank-table{
  width:100%;
  border-collapse:collapse;
  font-weight:600;
}
.rank-table thead{background:#fff7e1}
.rank-table th,
.rank-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.rank-table tbody tr:hover{background:#fffcee}
.rank-table a{
  color:#1a1d28;
  text-decoration:none;
  font-weight:800;
}
.rank-table th.col-num,
.rank-table td.col-num{
  text-align:center;
}
.table-cta{
  display:flex;
  justify-content:center;
  padding:12px;
}

/* ===== FOOTER / REDES SOCIAIS ================================== */
.foot{margin:28px 0 20px}
.foot-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
}
.brand-mini{
  display:flex;
  align-items:center;
  gap:8px;
}
.brand-mini .crown{width:32px;height:32px}

/* ===== SOCIAL LINKS ============================================ */
.social-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}
.social-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(10,20,60,.06);
  transition:all .18s ease;
}
.social-links a i{font-size:14px}
.social-links a:hover{
  background:linear-gradient(90deg,var(--gold3),var(--gold2));
  border-color:transparent;
  color:#2b2b2b;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(255,179,0,.20);
}
.social-links a.discord i{color:#5865f2}
.social-links a.youtube i{color:#ff4b4b}
.social-links a.tiktok i{color:#00f2ea}
.social-links a:hover i{filter:brightness(.9)}

/* ===== REVEAL ON SCROLL ======================================== */
.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:.45s ease;
}
.reveal.on{
  opacity:1;
  transform:none;
}

/* ===== DARK THEME ============================================== */
body:not(.theme-light){
  --bg:#0a0a0f;
  --ink:#f8f9ff;
  --muted:#9aa4bf;
  --muted2:#7d88a7;
  --panel:#111318;
  --panel2:#0f1116;
  --line:#1e2230;
  --shadow:0 12px 30px rgba(0,0,0,.45);
  background:radial-gradient(1600px 800px at 50% -20%,#1a1f2b 0%,transparent 40%),#0a0a0f;
}
body:not(.theme-light) .sbb-header{background:rgba(13,15,22,.7)}
body:not(.theme-light) .chip,
body:not(.theme-light) .ghost,
body:not(.theme-light) .pill{
  background:var(--panel);
  border:1px solid var(--line);
  color:#fff;
}
body:not(.theme-light) .cta{
  background:var(--panel);
  border:1px solid var(--line);
  color:#fff;
}
body:not(.theme-light) .table-wrap{
  background:var(--panel);
  border-color:var(--line);
}
body:not(.theme-light) .rank-table thead{background:#171922}
body:not(.theme-light) .rank-table tbody tr:hover{background:#131722}
body:not(.theme-light) .ticker{background:var(--panel)}
body:not(.theme-light) .social-links a{
  background:var(--panel);
  border-color:var(--line);
  color:var(--muted2);
  box-shadow:none;
}
body:not(.theme-light) .social-links a:hover{
  background:linear-gradient(90deg,var(--gold2),var(--gold));
  color:#111;
}
/* =========================================================
   AJUSTES MOBILE / TABLET
   ====================================================== */

/* Tablets e telas médias */
@media (max-width: 1024px) {
  .hero{
    grid-template-columns:1fr;
    gap:18px;
  }

  .section{
    margin:18px auto;
  }

  .foot-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
}

/* Celulares até ~768px */
@media (max-width: 768px) {
  /* HEADER: mais compacto */
  .sbb-header{
    grid-template-columns:auto 1fr auto;
    padding:8px 10px;
    gap:8px;
  }

  .brand .wordmark{
    font-size:18px;
  }

  .sbb-header .right{
    gap:6px;
  }

  .chip{
    height:34px;
    padding:0 10px;
    font-size:13px;
  }

  .btn,
  .pill{
    height:34px;
    padding:0 10px;
    font-size:13px;
  }

  .ghost{
    height:34px;
    width:34px;
  }

  /* Ticker um pouco menor */
  .ticker .marquee{
    font-size:13px;
    padding:8px 0 10px;
  }

  /* Hero e textos */
  .hero-copy h1{
    font-size:clamp(26px, 7vw, 32px);
  }

  body{
    font-size:15px;
  }

  /* Tabela com scroll horizontal em telas pequenas */
  .table-wrap{
    overflow-x:auto;
  }

  .rank-table{
    min-width:640px;
  }
}

/* Celulares bem pequenos (~480px) */
@media (max-width: 480px) {
  .sbb-header{
    grid-template-columns:auto 1fr auto;
  }

  .brand .wordmark{
    font-size:16px;
  }

  .hero{
    margin:16px auto;
    padding:0 10px;
  }

  .section{
    margin:16px auto;
    padding:0 10px;
  }

  .stats-glance{
    grid-template-columns:1fr 1fr;
  }

  .stats-glance>div{
    padding:8px 10px;
  }

  .profile-card{
    padding:14px 14px;
  }

  .profile-stats .k{
    font-size:16px;
  }
}

/* =========================================================
   MODAIS GENÉRICOS (loja / player / etc.)
   ====================================================== */

.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.55);
  z-index:999;
}

.modal.active{
  display:flex;
}

.modal-content{
  position:relative;
  width:100%;
  max-width:440px;
  background:var(--panel);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  padding:18px 20px 16px;
}

/* versão menor (confirmar compra, etc.) */
.modal-content.small{
  max-width:380px;
}

.modal-content h3,
.modal-content h2{
  margin:0 0 6px;
  font-weight:900;
}

/* botão X de fechar */
.modal-content .close{
  position:absolute;
  right:12px;
  top:10px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.modal-content .close:hover{
  background:rgba(148,163,184,.18);
}

/* área de botões no rodapé do modal */
.modal-actions{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

/* opcional: texto de status (erro/sucesso) dentro do modal */
#confirmPinnedStatus{
  font-size:12px;
}