/* Barra de topo compartilhada dos jogos.
   Deixa o link de volta sempre visível e o cabeçalho fino em qualquer jogo. */
body > header,
body > header.wrap {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center;
  min-height: 54px; padding: 6px 12px !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
body > header > .wrap,
body > header > div {
  display: flex; align-items: center; gap: .6rem;
  width: min(100%, 760px); margin-inline: auto; padding: 0;
}
/* o link de volta vira um botão compacto */
body > header a[href$="index.html"] {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  min-height: 40px; padding: .3rem .7rem;
  color: inherit; font-size: .88rem; font-weight: 800; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
}
body > header a[href$="index.html"]:hover { background: rgba(255, 255, 255, .3); }
body > header a[href$="index.html"]:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
/* título fica na mesma linha, sem quebrar a barra */
body > header h1 {
  flex: 1 1 auto; min-width: 0;
  margin: 0 !important; font-size: 1.02rem !important; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* série e matéria em texto pequeno; o detalhe completo fica na caixa da BNCC */
body > header .meta {
  flex: 0 0 auto; margin: 0 !important;
  font-size: .74rem !important; line-height: 1.2; opacity: .9;
  max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body > header .meta strong { font-weight: 700; }
@media (max-width: 560px) {
  body > header .meta { display: none; }
  body > header h1 { font-size: .96rem !important; }
}

/* ---- botão de compartilhar, no topo de cada jogo ---- */
body > header .mg-share{
  position:relative; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  min-height:44px; min-width:44px; padding:.3rem .7rem;
  color:inherit; font-size:.82rem; font-weight:800; line-height:1.2; white-space:nowrap;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.38);
  border-radius:999px; cursor:pointer;
}
body > header .mg-share:hover{ background:rgba(255,255,255,.3); }
body > header .mg-share:focus-visible{ outline:3px solid #fbbf24; outline-offset:2px; }
body > header .mg-share .mg-share-txt{ display:none; }
@media (min-width:520px){ body > header .mg-share .mg-share-txt{ display:inline; } }

.mg-share-menu{
  position:absolute; right:0; top:calc(100% + .4rem); z-index:70;
  display:grid; gap:.2rem; min-width:220px; padding:.35rem;
  background:#fff; border:1px solid #cbd5e1; border-radius:.7rem;
  box-shadow:0 10px 28px rgba(16,42,67,.22);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; text-align:left;
}
.mg-share-item{
  display:flex; align-items:center; gap:.45rem;
  min-height:44px; padding:.4rem .6rem;
  font:inherit; font-size:.86rem; font-weight:700; color:#17324d;
  background:transparent; border:0; border-radius:.45rem;
  text-decoration:none; cursor:pointer; text-align:left;
}
.mg-share-item:hover{ background:#f1f5f9; }
.mg-share-fechar{ color:#64748b; font-weight:600; }