/* ==========================================================
   JOGOS CECI — estilo compartilhado
   Cabecalho padrao de todos os jogos + ajustes de celular.
   Mexeu aqui, mudou em TODOS os jogos de uma vez.
   ========================================================== */

/* ---------- nunca deixa nada estourar a largura da tela ---------- */
html, body{ max-width:100%; overflow-x:hidden; }
img{ max-width:100%; height:auto; }

/* Dentro do app (WebView), sem isto a pagina "quica" quando o dedo
   passa do topo ou do fim — parece que a tela esta pulando sozinha. */
html{ overscroll-behavior-y: contain; }

/* tirar o atraso do toque duplo, que faz a tela dar um pulinho de zoom */
.ceci-back, .ceci-som{ touch-action: manipulation; }

/* ---------- cartao do cabecalho ---------- */
.ceci-header{
  --ceci-max: 1000px;                       /* cada pagina ajusta no style="" */
  width:min(var(--ceci-max), 100%);
  margin:0 auto 14px;
  box-sizing:border-box;
  padding:12px;
  border-radius:24px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 14px 34px rgba(74,0,110,.12);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  position:relative;
  z-index:5;
  text-align:left;
}

/* ---------- linha de cima: voltar + marca ---------- */
.ceci-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.ceci-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;                          /* alvo de toque no celular */
  padding:11px 16px;
  border:0;
  border-radius:14px;
  text-decoration:none;
  font-family:inherit;
  font-weight:900;
  font-size:15px;
  line-height:1;
  color:#fff;
  background:linear-gradient(135deg,#ec4899,#7c3aed);
  box-shadow:0 10px 20px rgba(124,58,237,.28);
  transition:transform .15s ease;
  white-space:nowrap;
}
.ceci-back:hover{ transform:translateY(-2px); }

/* botao de liga/desliga som — entra sozinho pelo ceci-som.js */
.ceci-som{
  margin-left:auto;
  flex:0 0 auto;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(124,58,237,.18);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 18px rgba(74,0,110,.10);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:transform .15s ease;
}
.ceci-som:hover{ transform:translateY(-2px); }
.ceci-som[aria-pressed="false"]{ opacity:.55; }

.ceci-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:900;
  font-size:15px;
  color:#6d28d9;
  white-space:nowrap;
}
.ceci-brand img{
  width:38px;
  height:38px;
  border-radius:11px;
  display:block;
  box-shadow:0 6px 14px rgba(74,0,110,.18);
}

/* ---------- faixa de identificacao do jogo ---------- */
.ceci-id{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(236,72,153,.10), rgba(124,58,237,.10) 55%, rgba(56,189,248,.10));
  border:1px solid rgba(124,58,237,.10);
}

.ceci-ico{
  flex:0 0 auto;
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:30px;
  line-height:1;
  background:#fff;
  box-shadow:0 10px 22px rgba(74,0,110,.14);
}

.ceci-txt{ min-width:0; }

.ceci-id h1{
  margin:0 0 3px;
  font-size:clamp(21px, 5vw, 29px);
  line-height:1.1;
  font-weight:900;
  color:#3c1361;
  letter-spacing:0;
  text-shadow:none;
  text-transform:none;
  font-family:inherit;
}

.ceci-id p{
  margin:0;
  font-size:13.5px;
  line-height:1.4;
  font-weight:700;
  color:#6b6480;
  max-width:none;
}

/* ---------- celular ---------- */
@media (max-width:520px){
  .ceci-header{ padding:10px; }
  .ceci-back{ flex:1 1 100%; }
  .ceci-brand{ flex:1 1 auto; justify-content:flex-start; }
  .ceci-som{ margin-left:auto; }
  .ceci-id{ padding:10px; gap:10px; }
  .ceci-ico{ width:48px; height:48px; font-size:25px; border-radius:15px; }
  .ceci-id p{ font-size:12.5px; }
}