/* ============================================================
   CIVIQUEST · CARTOON LOGIN: civiquest-cartoon.css
   Aplica o visual aprovado (Variante A, Parque Ensolarado de
   Maringa com Catedral) na tela de Login.
   Salvar em: public/assets/css/civiquest-cartoon.css
   ============================================================ */
/* Autoria: Amolemar Barcellos Mesquita | Engenheiro de Software e IA */


/* Utilitario global para esconder elementos sem depender do Tailwind */
.hidden{ display:none !important; }

/* ============================================================
   SPRINT 31 - Animações cartoon globais reutilizáveis.
   Use em qualquer elemento adicionando a classe correspondente.
   ============================================================ */
@keyframes cq-pop-in       { 0%{ opacity:0; transform:scale(.6); } 60%{ opacity:1; transform:scale(1.08); } 100%{ transform:scale(1); } }
@keyframes cq-slide-up     { 0%{ opacity:0; transform:translateY(30px); } 100%{ opacity:1; transform:translateY(0); } }
@keyframes cq-slide-down   { 0%{ opacity:0; transform:translateY(-30px); } 100%{ opacity:1; transform:translateY(0); } }
@keyframes cq-slide-left   { 0%{ opacity:0; transform:translateX(30px); } 100%{ opacity:1; transform:translateX(0); } }
@keyframes cq-slide-right  { 0%{ opacity:0; transform:translateX(-30px); } 100%{ opacity:1; transform:translateX(0); } }
@keyframes cq-shake        { 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-8px); } 40%{ transform:translateX(8px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); } }
@keyframes cq-jiggle       { 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-3deg); } 75%{ transform:rotate(3deg); } }
@keyframes cq-pulse-glow   { 0%,100%{ filter:drop-shadow(0 0 8px rgba(255,224,102,.5)); } 50%{ filter:drop-shadow(0 0 24px rgba(255,224,102,1)); } }
@keyframes cq-bump         { 0%{ transform:scale(1); } 30%{ transform:scale(1.18); } 60%{ transform:scale(.95); } 100%{ transform:scale(1); } }
@keyframes cq-rotate-slow  { to{ transform:rotate(360deg); } }
@keyframes cq-tilt         { 0%,100%{ transform:rotate(-2deg); } 50%{ transform:rotate(2deg); } }
@keyframes cq-float        { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes cq-coin-flip    { 0%{ transform:rotateY(0) scale(1); } 50%{ transform:rotateY(180deg) scale(1.1); } 100%{ transform:rotateY(360deg) scale(1); } }
@keyframes cq-confeti-fall { 0%{ transform:translateY(-100px) rotate(0); opacity:1; } 100%{ transform:translateY(110vh) rotate(720deg); opacity:0; } }

.cq-anim-pop      { animation:cq-pop-in     .5s cubic-bezier(.34,1.56,.64,1) both; }
.cq-anim-slide-up { animation:cq-slide-up   .4s ease-out both; }
.cq-anim-slide-dn { animation:cq-slide-down .4s ease-out both; }
.cq-anim-shake    { animation:cq-shake      .5s ease-out; }
.cq-anim-jiggle   { animation:cq-jiggle     .5s ease-in-out infinite; }
.cq-anim-glow     { animation:cq-pulse-glow 2s  ease-in-out infinite; }
.cq-anim-bump     { animation:cq-bump       .4s ease-out; }
.cq-anim-float    { animation:cq-float      3s  ease-in-out infinite; }
.cq-anim-tilt     { animation:cq-tilt       4s  ease-in-out infinite; }
.cq-anim-rotate   { animation:cq-rotate-slow 14s linear infinite; }
.cq-anim-coin     { animation:cq-coin-flip  .8s ease-out; }

/* Botão de mute global (canto inferior esquerdo discreto). */
.cq-mute-btn{
  position:fixed; bottom:14px; left:14px; z-index:999;
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:3px solid var(--cq-ink);
  box-shadow:0 4px 0 var(--cq-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; user-select:none;
  transition:transform .08s, box-shadow .08s;
}
.cq-mute-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--cq-ink); }
.cq-mute-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--cq-ink); }
.cq-mute-btn.muted{ background:#FFD6DA; color:#7A0F1E; border-color:#7A0F1E; box-shadow:0 4px 0 #7A0F1E; }
.cq-mute-btn.muted:active{ box-shadow:0 2px 0 #7A0F1E; }
@media print{ .cq-mute-btn{ display:none !important; } }

/* === TOKENS === */
:root{
  --cq-cream:#FFF5E1;     --cq-cream-2:#FFE9C2;
  --cq-orange:#FF9F1C;    --cq-orange-d:#E27A0E;
  --cq-teal:#2EC4B6;      --cq-teal-d:#15807A;
  --cq-red:#E71D36;       --cq-red-d:#B0152A;
  --cq-green-1:#5DD865;   --cq-green-2:#2BAE3A;  --cq-green-d:#157A21;
  --cq-ink:#2b2410;
  --cq-sky-1:#87CEEB;     --cq-sky-2:#B7E4F4;
  --cq-grass-1:#7BD16A;   --cq-grass-2:#56A34F;  --cq-grass-3:#3F8336;
}

/* === FUNDO DA PÁGINA: sobrescreve qualquer dark bg anterior === */
html.cq-no-overflow, body.cq-login-bg{
  overflow-x:hidden;
}
body.cq-login-bg{
  background: linear-gradient(180deg, var(--cq-sky-1) 0%, var(--cq-sky-2) 45%, var(--cq-cream) 78%) !important;
  color: var(--cq-ink);
  font-family: 'Nunito', system-ui, sans-serif;
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
}

/* === CENA RESPONSIVA (preenche viewport) === */
.cq-stage{
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px 16px 220px;   /* respira em cima e deixa espaço pro morro embaixo */
}

/* === ELEMENTOS DE CENÁRIO === */
.cq-sun{
  position:absolute; top:46px; right:54px; width:96px; height:96px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #FFF6BE, #FEC42B 60%, #FF9F1C);
  border:5px solid var(--cq-ink);
  box-shadow:0 6px 0 var(--cq-ink);
  z-index:2;
}
.cq-cloud{ position:absolute; z-index:2; }
.cq-cloud svg{ display:block; }
.cq-cloud--c1{ top:120px; left:30px; }
.cq-cloud--c2{ top:200px; right:160px; transform:scale(.8); }
.cq-cloud--c3{ top:80px;  left:240px; transform:scale(.6); }

.cq-skyline{
  position:absolute; left:0; right:0; bottom:280px; height:120px;
  display:flex; align-items:flex-end; justify-content:space-around;
  padding:0 30px; z-index:1; opacity:.85; pointer-events:none;
}
.cq-skyline .gap{ width:200px; }
.cq-bldg{ border:3px solid var(--cq-ink); border-top-left-radius:6px; border-top-right-radius:6px;
  box-shadow: inset -6px 0 0 rgba(0,0,0,.18), inset 0 -6px 0 rgba(0,0,0,.18);
  display:flex; flex-direction:column; gap:8px; padding-top:8px; align-items:center; }
.cq-bldg .row{ display:flex; gap:8px; }
.cq-bldg i{ width:8px; height:10px; background:#FFE066; border:1.5px solid var(--cq-ink); }

.cq-catedral{
  position:absolute; left:50%; bottom:240px; transform:translateX(-50%);
  z-index:2; width:340px; max-width:60vw; height:auto; pointer-events:none;
}

.cq-hill{
  position:absolute; left:-40px; right:-40px; bottom:0; height:240px;
  background: linear-gradient(180deg, var(--cq-grass-1) 0%, var(--cq-grass-2) 60%, var(--cq-grass-3) 100%);
  border-top:6px solid var(--cq-ink);
  border-top-left-radius:50% 30%; border-top-right-radius:50% 30%;
  z-index:3;
}
.cq-hill .tree{ position:absolute; top:-18px; font-size:28px; }
.cq-hill .tree.t1{ left:10%; } .cq-hill .tree.t2{ left:28%; }
.cq-hill .tree.t3{ left:50%; } .cq-hill .tree.t4{ left:72%; }
.cq-hill .tree.t5{ left:90%; }

/* === TOPBAR ACESSIBILIDADE === */
.cq-topbar{
  position:absolute; top:18px; left:18px; display:flex; gap:10px; z-index:7;
}
.cq-topbtn{
  background:#fff; border:3px solid var(--cq-ink); color:var(--cq-ink);
  border-radius:14px; padding:8px 12px;
  font-family:'Lilita One',system-ui; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; box-shadow:0 4px 0 var(--cq-ink);
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
}
.cq-topbtn:hover{ background:#FFF7DC; }
/* Sprint 22D - no celular esconde topbar para nao cobrir a logo do card de login.
   No mobile o FAB azul de acessibilidade ja oferece os mesmos controles. */
@media (max-width: 640px){
  .cq-topbar{ display:none !important; }
}

/* === CARD DE LOGIN === */
.cq-panel{
  position:relative; z-index:5;
  background:#fff; border:5px solid var(--cq-ink); border-radius:30px;
  box-shadow:0 10px 0 var(--cq-ink), 0 18px 30px rgba(0,0,0,.18);
  padding:28px 24px;
  width:min(480px, 92vw);
}
.cq-logo{ display:flex; align-items:center; gap:14px; justify-content:center; }
.cq-logo .badge{
  width:62px; height:62px; border-radius:18px;
  background: linear-gradient(180deg, var(--cq-orange), var(--cq-red));
  border:4px solid var(--cq-ink); box-shadow:0 5px 0 var(--cq-ink);
  display:flex; align-items:center; justify-content:center; transform:rotate(-6deg);
}
.cq-logo .text{ text-align:left; line-height:.95; }
.cq-logo .text .t1{ font-family:'Lilita One',system-ui; font-size:34px; color:var(--cq-ink); text-shadow:0 3px 0 #FFB957; }
.cq-logo .text .t2{ font-family:'Lilita One',system-ui; font-size:14px; color:#5a4a2a; letter-spacing:3px; }

.cq-plaque{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--cq-cream-2); color:#7A4F00; border:3px solid var(--cq-ink);
  padding:6px 14px; border-radius:999px;
  font-family:'Lilita One',system-ui; font-size:13px; letter-spacing:.1em;
  box-shadow:0 4px 0 var(--cq-ink);
}
.cq-chips{ display:flex; gap:8px; justify-content:center; margin:14px 0 18px; flex-wrap:wrap; }
.cq-chip{
  display:inline-flex; align-items:center; gap:6px;
  border:3px solid; border-radius:999px; padding:6px 12px;
  font-family:'Lilita One',system-ui; font-size:13px;
}
.cq-chip.teal{   background:#D4F5F1; color:#0E5853; border-color:#15807A; box-shadow:0 3px 0 #15807A; }
.cq-chip.orange{ background:#FFE9C2; color:#7A4F00; border-color:#9F4E00; box-shadow:0 3px 0 #9F4E00; }
.cq-chip.red{    background:#FFD6DA; color:#7A0F1E; border-color:#7A0F1E; box-shadow:0 3px 0 #7A0F1E; }

.cq-input{
  width:100%; border:4px solid var(--cq-ink); border-radius:18px; background:#fff;
  padding:18px 20px; font-family:'Lilita One',system-ui; font-size:26px;
  text-align:center; letter-spacing:.2em; text-transform:uppercase; color:var(--cq-ink);
  box-shadow:0 6px 0 var(--cq-ink), inset 0 -4px 0 rgba(0,0,0,.05);
  outline:none; box-sizing:border-box;
}
.cq-input::placeholder{ color:#bdb18a; }
.cq-input:focus{ border-color:var(--cq-orange); box-shadow:0 6px 0 var(--cq-orange-d), inset 0 -4px 0 rgba(0,0,0,.05); }

.cq-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:18px 26px; border-radius:18px;
  font-family:'Lilita One',system-ui; font-size:22px; letter-spacing:.04em;
  color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.25);
  border:3px solid rgba(0,0,0,.18);
  box-shadow:0 7px 0 var(--btn-shadow,#0a0a0a), 0 9px 18px rgba(0,0,0,.25),
             inset 0 -3px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35);
  cursor:pointer; user-select:none;
  transition:transform .08s ease, box-shadow .08s ease;
  text-transform:uppercase;
}
.cq-btn:active{ transform:translateY(5px); box-shadow:0 2px 0 var(--btn-shadow,#0a0a0a), 0 4px 8px rgba(0,0,0,.25); }
.cq-btn--green { background:linear-gradient(180deg,var(--cq-green-1),var(--cq-green-2));  --btn-shadow:var(--cq-green-d); width:100%; }
.cq-btn--ghost { background:linear-gradient(180deg,#FFFCEF,#FFE9C2); color:var(--cq-ink); text-shadow:none; --btn-shadow:#B07A22; padding:12px 18px; font-size:15px; }

/* === MASCOTE INGAZINHO === */
.cq-mascote{
  position:absolute; left:14px; bottom:14px; z-index:8;
  display:flex; align-items:flex-end; gap:10px; pointer-events:none;
}
.cq-mascote .balao{
  position:relative;
  margin-bottom: 130px;     /* ALINHA balao a direita do mascote (desativado) */
  background:#fff; border:4px solid var(--cq-ink); border-radius:18px;
  padding:10px 14px; font-family:'Lilita One',system-ui; font-size:16px; color:var(--cq-ink);
  box-shadow:0 5px 0 var(--cq-ink); white-space:nowrap;
}
.cq-mascote .balao::before{
  content:""; position:absolute; left:-16px; bottom:14px; width:0; height:0;
  border-top:10px solid transparent; border-bottom:10px solid transparent;
  border-right:16px solid var(--cq-ink);
}
.cq-mascote .balao::after{
  content:""; position:absolute; left:-10px; bottom:14px; width:0; height:0;
  border-top:10px solid transparent; border-bottom:10px solid transparent;
  border-right:16px solid #fff;
}
.cq-mascote img{
  display:block; width:170px; height:auto;
  filter: contrast(1.06) saturate(1.08) drop-shadow(0 8px 14px rgba(0,0,0,.25));
  -webkit-user-drag:none; user-select:none;
}

/* === ANIMAÇÕES === */
@keyframes cq-drift  { 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(14px);} }
.cq-drift{ animation: cq-drift 8s ease-in-out infinite; }
@keyframes cq-sway   { 0%,100%{ transform:rotate(-1.8deg) translateY(0);} 50%{ transform:rotate(1.8deg) translateY(-4px);} }
.cq-sway{ animation: cq-sway 3.2s ease-in-out infinite; transform-origin:50% 95%; }

/* === RODAPÉ === */
.cq-footer{
  position:absolute; bottom:6px; left:0; right:0; text-align:center;
  font-family:'Lilita One',system-ui; font-size:12px; color:#fff; letter-spacing:3px;
  text-shadow:0 2px 0 var(--cq-ink); z-index:4;
}

/* === RESPONSIVO === */
@media (max-width: 768px){
  .cq-sun{ width:64px; height:64px; top:18px; right:18px; }
  .cq-skyline{ bottom:200px; height:90px; }
  .cq-catedral{ width:220px; bottom:170px; }
  .cq-hill{ height:170px; }
  .cq-mascote img{ width:120px; }
  .cq-mascote .balao{ display:none; }       /* libera espaço no mobile */
  .cq-panel{ padding:18px 14px; border-radius:24px; }
  .cq-input{ font-size:20px; padding:14px 16px; }
  .cq-btn{ font-size:18px; padding:14px 18px; }
  .cq-logo .text .t1{ font-size:26px; }
  .cq-logo .text .t2{ font-size:11px; letter-spacing:2px; }
}
@media (min-width: 1280px){
  .cq-catedral{ width:380px; bottom:260px; }
  .cq-mascote img{ width:200px; }
  .cq-skyline{ bottom:300px; }
}
@media (min-width: 1600px){
  .cq-catedral{ width:440px; bottom:280px; }
  .cq-mascote img{ width:230px; }
}

/* === MODO ALTO CONTRASTE (mantém o existente) === */
body.tema-contraste.cq-login-bg{
  background:#000 !important;
}
body.tema-contraste .cq-panel{ background:#000; color:#FFE066; border-color:#FFE066; box-shadow:0 10px 0 #FFE066; }
body.tema-contraste .cq-panel *{ color:#FFE066 !important; }
body.tema-contraste .cq-input{ background:#000; color:#FFE066; border-color:#FFE066; box-shadow:0 6px 0 #FFE066; }
body.tema-contraste .cq-btn--green{ background:#FFE066; color:#000; text-shadow:none; --btn-shadow:#000; }
/* Elementos de fundo claro dentro do painel tambem ficam pretos, senao o texto amarelo some */
body.tema-contraste .cq-plaque,
body.tema-contraste .cq-chip,
body.tema-contraste .cq-btn--ghost,
body.tema-contraste .cq-btn-aba{
  background:#000 !important; color:#FFE066 !important; border-color:#FFE066 !important;
  box-shadow:0 3px 0 #FFE066 !important; text-shadow:none !important;
}
/* Aba ativa invertida, para continuar visivel qual forma de login esta aberta */
body.tema-contraste .cq-btn-aba--ativa{ background:#FFE066 !important; color:#000 !important; }

/* ============================================================
   CIVIQUEST · CARTOON HUD: apêndice ao civiquest-cartoon.css
   Aplica o visual aprovado (Sprint 21B) ao painel pós-login,
   mantendo todos os IDs e onclick atuais do login.blade.php
   ============================================================ */

/* === HUD TOPBAR (faixa superior com avatar + stats + ações) === */
.cq-hud-topbar{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:4px solid var(--cq-ink); border-radius:24px;
  padding:10px 14px; margin-bottom:14px;
  box-shadow:0 8px 0 var(--cq-ink), 0 14px 24px rgba(0,0,0,.15);
  flex-wrap:wrap; position:relative; z-index:5;
}
.cq-hud-logo{
  display:flex; align-items:center; gap:10px; padding-right:14px;
  border-right:3px dashed rgba(0,0,0,.18);
}
.cq-hud-logo .badge{
  width:48px; height:48px; border-radius:14px;
  background: linear-gradient(180deg, var(--cq-orange), var(--cq-red));
  border:3px solid var(--cq-ink); box-shadow:0 4px 0 var(--cq-ink);
  display:flex; align-items:center; justify-content:center; transform:rotate(-6deg);
  flex-shrink:0;
}
.cq-hud-logo .text .t1{ font-family:'Lilita One',system-ui; font-size:20px; color:var(--cq-ink); text-shadow:0 2px 0 #FFB957; line-height:1; }
.cq-hud-logo .text .t2{ font-family:'Lilita One',system-ui; font-size:9px; color:#5a4a2a; letter-spacing:2px; }

/* === STAT CHIP (XP / Moedas / Streak / Vidas / Power) === */
.cq-stat{
  display:flex; align-items:center; gap:8px;
  border:3px solid var(--cq-ink); border-radius:16px;
  padding:8px 14px; box-shadow:0 4px 0 var(--cq-ink);
  font-family:'Lilita One', system-ui; min-width:88px;
}
.cq-stat .ic{ font-size:22px; line-height:1; }
.cq-stat .label{ font-size:9px; letter-spacing:1.5px; opacity:.75; line-height:1; }
.cq-stat .val{ font-size:18px; line-height:1.05; }
.cq-stat--xp     { background:#D9ECFF; color:#0F3C66; border-color:#155A8E; box-shadow:0 4px 0 #155A8E; }
.cq-stat--moedas { background:#FFE9C2; color:#7A4F00; border-color:#9F4E00; box-shadow:0 4px 0 #9F4E00; }
.cq-stat--streak { background:#FFD6DA; color:#7A0F1E; border-color:#7A0F1E; box-shadow:0 4px 0 #7A0F1E; }
.cq-stat--vidas  { background:#FFEAEC; color:#7A0F1E; border-color:#7A0F1E; box-shadow:0 4px 0 #7A0F1E; }
.cq-stat--power  { background:#E9DCFF; color:#3F1F8F; border-color:#3F1F8F; box-shadow:0 4px 0 #3F1F8F; }

/* === BANNERS (Evento / Desafio Cívico) === */
.cq-banner{
  display:flex; align-items:center; gap:14px;
  border:4px solid var(--cq-ink); border-radius:22px;
  padding:14px 18px; box-shadow:0 6px 0 var(--cq-ink);
  cursor:pointer; transition:transform .15s; position:relative; overflow:hidden;
  margin-bottom:12px; color:#fff;
}
.cq-banner:hover{ transform:translateY(-2px); }
.cq-banner--evento  { background:linear-gradient(135deg,#FF7AD2,#7C4DFF); }
.cq-banner--desafio { background:linear-gradient(135deg,#FFB957,#FF7AD2); color:#2b2410; }
.cq-banner .emoji-box{
  width:64px; height:64px; border-radius:16px; background:#fff; border:3px solid var(--cq-ink);
  display:flex; align-items:center; justify-content:center; font-size:34px; box-shadow:0 4px 0 var(--cq-ink); flex-shrink:0;
}
.cq-banner .tag{
  display:inline-block; font-family:'Lilita One',system-ui; font-size:10px; letter-spacing:2px;
  padding:3px 10px; border-radius:999px; border:2px solid var(--cq-ink); margin-bottom:4px;
  background:rgba(0,0,0,.35); color:#FFE066;
}
.cq-banner--desafio .tag{ background:#7A0F1E; color:#FFE066; }
.cq-banner .titulo{ font-family:'Lilita One',system-ui; font-size:22px; line-height:1.1; text-shadow:0 2px 0 rgba(0,0,0,.25); }
.cq-banner .sub{ font-family:'Fredoka',sans-serif; font-size:13px; }

/* === MAPA DE MUNDOS / ILHAS === */
.cq-mapa-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(3, 1fr);
}
.cq-ilha{
  position:relative; min-height:170px; padding:14px;
  border:4px solid var(--cq-ink); border-radius:22px;
  box-shadow:0 6px 0 var(--cq-ink); color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  text-align:left; cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.cq-ilha:hover{ transform:translateY(-3px); box-shadow:0 9px 0 var(--cq-ink); }
.cq-ilha .ico{
  width:48px; height:48px; background:#fff; border:3px solid var(--cq-ink); border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  box-shadow:0 3px 0 var(--cq-ink); margin-bottom:8px;
}
.cq-ilha .nome{ font-family:'Lilita One',system-ui; font-size:18px; line-height:1.05; letter-spacing:.5px; text-shadow:0 2px 0 rgba(0,0,0,.25); }
.cq-ilha .sub { font-family:'Fredoka',sans-serif; font-weight:600; font-size:12px; line-height:1.3; margin-top:4px; opacity:.95; }
.cq-ilha .barra{ height:8px; background:rgba(0,0,0,.18); border:2px solid var(--cq-ink); border-radius:6px; margin-top:10px; overflow:hidden; }
.cq-ilha .barra > span{ display:block; height:100%; background:#FEC42B; }
.cq-ilha--mat   { background:linear-gradient(180deg,#4FB6FFcc,#1F8BD9); }
.cq-ilha--por   { background:linear-gradient(180deg,#FF7A8Acc,#E71D36); }
.cq-ilha--cie   { background:linear-gradient(180deg,#5DD8C8cc,#15807A); }
.cq-ilha--his   { background:linear-gradient(180deg,#FFB957cc,#9F4E00); }
.cq-ilha--geo   { background:linear-gradient(180deg,#7BD16Acc,#3F8336); }
.cq-ilha--sus   { background:linear-gradient(180deg,#A6E68Acc,#56A34F); }
.cq-ilha--civ   { background:linear-gradient(135deg,#FF7AD2,#7C4DFF); grid-column:1 / -1; }
.cq-ilha--mista { background:linear-gradient(135deg,#FFE066,#FF9F1C); color:#2b2410; grid-column:1 / -1; }
.cq-ilha--locked{ opacity:.85; }
.cq-ilha--locked::after{ content:"🔒"; position:absolute; top:10px; right:12px; font-size:18px; }

/* === QUESTS DO DIA === */
.cq-quests{
  background:#fff; border:4px solid var(--cq-ink); border-radius:22px;
  padding:14px 16px; box-shadow:0 6px 0 var(--cq-ink); margin-bottom:14px;
}
.cq-quests h3{ font-family:'Lilita One',system-ui; font-size:14px; letter-spacing:1.5px; margin:0 0 10px; color:#2b2410; white-space:nowrap; }
.cq-quest{
  display:flex; align-items:center; gap:10px;
  border:3px solid var(--cq-ink); border-radius:14px; padding:8px 12px;
  box-shadow:0 3px 0 var(--cq-ink); margin-bottom:8px; background:#fff;
}
.cq-quest.done{ background:#D4F5F1; }
.cq-quest .check{
  width:22px; height:22px; border-radius:8px; border:3px solid var(--cq-ink);
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Lilita One',system-ui; font-size:14px;
  background:#FFF7DC; flex-shrink:0;
}
.cq-quest.done .check{ background:#2BAE3A; }
.cq-quest .text{ flex:1; font-family:'Fredoka',sans-serif; font-weight:600; font-size:13px; color:#2b2410; }
.cq-quest.done .text{ text-decoration:line-through; opacity:.7; }
.cq-quest .reward{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--cq-cream-2); color:#7A4F00; border:2px solid var(--cq-ink);
  font-family:'Lilita One'; font-size:10px; padding:3px 8px; border-radius:999px;
  box-shadow:0 2px 0 var(--cq-ink); white-space:nowrap;
}

/* ============================================================
   RESPONSIVO MOBILE (≤ 768px)
   - 5 stats em grid sem barra de rolagem
   - ilhas em 2 colunas com TEXTO COMPLETO
   - aplica também ao banner Avenida Cívica
   ============================================================ */
@media (max-width: 768px){
  .cq-hud-topbar{
    padding:8px 10px; gap:6px;
    flex-wrap:nowrap; flex-direction:column; align-items:stretch;
  }
  .cq-hud-topbar .cq-hud-logo{
    border-right:none; padding-right:0; padding-bottom:6px;
    border-bottom:3px dashed rgba(0,0,0,.18);
  }
  /* Container exclusivo dos 5 stats */
  .cq-hud-stats{
    display:grid !important; grid-template-columns:repeat(5,1fr); gap:4px;
  }
  .cq-stat{
    min-width:0; padding:6px 2px; border-width:2.5px; border-radius:11px;
    flex-direction:column; align-items:center; gap:1px;
  }
  .cq-stat .ic{ font-size:16px; }
  .cq-stat .label{ font-size:8px; letter-spacing:.5px; }
  .cq-stat .val{ font-size:13px; }
  .cq-stat--vidas .val .vidas-icones{ display:none; }  /* esconde corações */

  /* Ações LOJA/PERFIL/RANKING viram linha de 3 botões finos */
  .cq-hud-acoes{ display:flex !important; flex-direction:row !important; gap:6px; }
  .cq-hud-acoes .cq-btn{ flex:1; font-size:11px !important; padding:10px 4px !important; }

  /* Banners encolhem */
  .cq-banner{ padding:10px 12px; gap:10px; }
  .cq-banner .emoji-box{ width:46px; height:46px; font-size:22px; }
  .cq-banner .titulo{ font-size:16px; }
  .cq-banner .sub{ font-size:11px; }

  /* Mapa: 2 colunas, NOMES COMPLETOS */
  .cq-mapa-grid{ grid-template-columns:1fr 1fr; gap:8px; }
  .cq-ilha{ min-height:130px; padding:10px 8px; border-radius:14px; }
  .cq-ilha .ico{ width:32px; height:32px; font-size:16px; border-radius:10px; margin-bottom:6px; }
  .cq-ilha .nome{ font-size:11px; line-height:1.05; }
  .cq-ilha .sub { font-size:9.5px; line-height:1.2; }

  /* Quests viram cartão único acima do mapa */
  .cq-quests{ padding:10px 12px; }
  .cq-quests h3{ font-size:12px; }
  .cq-quest{ padding:6px 10px; }
  .cq-quest .text{ font-size:11.5px; }
  .cq-quest .reward{ font-size:9px; padding:2px 6px; }
}
@media (max-width: 360px){
  .cq-stat .val{ font-size:12px; }
  .cq-stat .ic{ font-size:14px; }
}

/* === MODO ALTO CONTRASTE (HUD) === */
body.tema-contraste .cq-hud-topbar,
body.tema-contraste .cq-quests,
body.tema-contraste .cq-stat,
body.tema-contraste .cq-banner,
body.tema-contraste .cq-ilha{
  background:#000 !important; color:#FFE066 !important;
  border-color:#FFE066 !important; box-shadow:0 6px 0 #FFE066 !important;
}
body.tema-contraste .cq-banner *,
body.tema-contraste .cq-ilha *,
body.tema-contraste .cq-stat *{ color:#FFE066 !important; }

/* O tema supoe fundo escuro, mas o jogo tem cartoes, pilulas e modais claros. O script
   de acessibilidade marca com cq-hc-fundo toda caixa de fundo claro (inclusive as que
   aparecem depois), para nao sobrar texto amarelo ou branco sobre fundo claro. */
/* O id do body da mais peso que as regras antigas com #wrapper-jogo e !important */
#corpo-pagina.tema-contraste .cq-hc-fundo{
  background:#000 !important; background-image:none !important;
  border-color:#FFE066 !important; box-shadow:none !important;
}
#corpo-pagina.tema-contraste .cq-hc-fundo,
#corpo-pagina.tema-contraste .cq-hc-fundo *{ color:#FFE066 !important; text-shadow:none !important; }
/* Caixas que ja sao amarelas no tema (nivel, dia atual) levam texto preto */
#corpo-pagina.tema-contraste .cq-hc-destaque,
#corpo-pagina.tema-contraste .cq-hc-destaque *{ color:#000 !important; text-shadow:none !important; }
#corpo-pagina.tema-contraste .cq-hc-destaque .cq-hc-fundo,
#corpo-pagina.tema-contraste .cq-hc-destaque .cq-hc-fundo *{ color:#FFE066 !important; }
/* Etiquetas de tom medio (verde, laranja, cinza) mantem a cor e levam texto preto */
#corpo-pagina.tema-contraste .cq-hc-medio,
#corpo-pagina.tema-contraste .cq-hc-medio *{ color:#000 !important; text-shadow:none !important; }
/* Texto escuro que ficava sobre o fundo preto do tema */
body.tema-contraste .cq-game-topbar .cq-game-logo .text .t1,
body.tema-contraste .cq-game-topbar .cq-game-logo .text .t2,
body.tema-contraste .cq-recompensa-box .r-label{ color:#FFE066 !important; text-shadow:none !important; }
/* Destaques em amarelo cheio levam texto preto */
body.tema-contraste .cq-banner-civica .cta{ background:#FFE066 !important; color:#000 !important; border-color:#FFE066 !important; }
/* Etiquetas de situacao das ilhas mantem a cor (cinza, laranja, verde) com texto preto */
body.tema-contraste .cq-ilha .cq-distrito-tag{ color:#000 !important; }

/* ============================================================
   Variantes de botao adicionais (Sprint 21B HUD)
   ============================================================ */
.cq-btn--orange{ background:linear-gradient(180deg,#FFD27A,#FF9F1C); --btn-shadow:#A85700; }
.cq-btn--teal  { background:linear-gradient(180deg,#5BE0D2,#15807A); --btn-shadow:#0F5D58; }
.cq-btn--red   { background:linear-gradient(180deg,#FF7A8A,#E71D36); --btn-shadow:#7A0F1E; }

/* ============================================================
   SPRINT 21C - Layout pos-login conforme mockup desktop
   Reescreve o wrapper-jogo: topbar com logo separada,
   stats em chips largos, sidebar com avatar-card + quests,
   banners empilhados a direita, mapa abaixo, Avenida Civica
   vira faixa horizontal, mascote no rodape do jogo.
   ============================================================ */

/* Wrapper externo - fundo cartoon e respiro */
#wrapper-jogo.cq-game-wrap{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:18px 18px 240px !important;
  max-width:1280px !important;
  position:relative;
}

/* === TOPBAR LARGA (logo + stats + acoes) === */
.cq-game-topbar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}
.cq-game-topbar .cq-game-logo{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:4px solid var(--cq-ink); border-radius:24px;
  padding:8px 14px; box-shadow:0 6px 0 var(--cq-ink);
}
.cq-game-topbar .cq-game-logo .badge{
  width:48px; height:48px; border-radius:14px;
  background: linear-gradient(180deg, var(--cq-orange), var(--cq-red));
  border:3px solid var(--cq-ink); box-shadow:0 4px 0 var(--cq-ink);
  display:flex; align-items:center; justify-content:center; transform:rotate(-6deg);
  flex-shrink:0;
}
.cq-game-topbar .cq-game-logo .text .t1{ font-family:'Lilita One',system-ui; font-size:22px; color:var(--cq-ink); text-shadow:0 2px 0 #FFB957; line-height:1; }
.cq-game-topbar .cq-game-logo .text .t2{ font-family:'Lilita One',system-ui; font-size:10px; color:#5a4a2a; letter-spacing:2.5px; line-height:1.4; }

.cq-game-topbar .cq-game-stats{
  display:flex; gap:10px; flex-wrap:nowrap; justify-content:center;
}
.cq-stat--big{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:10px;
  border:3px solid var(--cq-ink); border-radius:18px;
  padding:10px 14px; box-shadow:0 4px 0 var(--cq-ink);
  font-family:'Lilita One',system-ui;
}
.cq-stat--big .ic{ font-size:24px; line-height:1; flex-shrink:0; }
.cq-stat--big .label{ font-size:9px; letter-spacing:1.5px; opacity:.75; line-height:1; }
.cq-stat--big .val{ font-size:20px; line-height:1.05; }
.cq-stat--big.is-xp     { background:#D9ECFF; color:#0F3C66; border-color:#155A8E; box-shadow:0 4px 0 #155A8E; }
.cq-stat--big.is-moedas { background:#FFE9C2; color:#7A4F00; border-color:#9F4E00; box-shadow:0 4px 0 #9F4E00; }
.cq-stat--big.is-streak { background:#FFD6DA; color:#7A0F1E; border-color:#7A0F1E; box-shadow:0 4px 0 #7A0F1E; }
.cq-stat--big.is-vidas  { background:#FFEAEC; color:#7A0F1E; border-color:#7A0F1E; box-shadow:0 4px 0 #7A0F1E; }
.cq-stat--big.is-power  { background:#E9DCFF; color:#3F1F8F; border-color:#3F1F8F; box-shadow:0 4px 0 #3F1F8F; }

.cq-game-topbar .cq-game-acoes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  align-content:center;
  min-width:230px;
}
.cq-game-topbar .cq-game-acoes .cq-btn{
  font-size:12.5px; padding:10px 8px; min-width:0; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; gap:5px;
  border-radius:14px;
}
/* 5 botoes: ultimo (CAIXA) ocupa a linha inteira, formando bloco 2x2 + faixa */
.cq-game-topbar .cq-game-acoes .cq-btn:last-child{ grid-column:1 / -1; }

/* === GRID SIDEBAR + MAIN === */
.cq-game-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:16px;
  align-items:start;
}

/* Card grande do avatar */
.cq-avatar-card{
  background:#fff; border:4px solid var(--cq-ink); border-radius:24px;
  padding:18px 16px; box-shadow:0 8px 0 var(--cq-ink);
  text-align:center;
}
.cq-avatar-card .ring{
  width:140px; height:140px; margin:0 auto 10px;
  border-radius:50%;
  background: radial-gradient(circle, #FFE066 0%, #FF9F1C 70%, #E27A0E 100%);
  border:5px solid var(--cq-ink); box-shadow:0 6px 0 var(--cq-ink);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:visible;
}
.cq-avatar-card .ring img{ width:84%; height:84%; border-radius:50%; object-fit:cover; }
.cq-avatar-card .ring .lvl{
  position:absolute; bottom:-8px; right:-8px;
  background:#FFE066; border:4px solid var(--cq-ink); border-radius:50%;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-family:'Lilita One',system-ui; font-size:20px; color:#7A4F00;
  box-shadow:0 4px 0 var(--cq-ink);
}
.cq-avatar-card .tier-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:#FFF7DC; color:#7A4F00; border:3px solid var(--cq-ink);
  padding:4px 12px; border-radius:999px;
  font-family:'Lilita One',system-ui; font-size:11px; letter-spacing:2px;
  box-shadow:0 3px 0 var(--cq-ink); margin-bottom:8px;
}
.cq-avatar-card .nome-aluno{
  font-family:'Lilita One',system-ui; font-size:24px; color:var(--cq-ink);
  letter-spacing:1px; margin:6px 0 4px;
}
.cq-avatar-card .meta-aluno{
  font-family:'Fredoka',sans-serif; font-size:12px; color:#5a4a2a; margin-bottom:10px;
}
.cq-avatar-card .xp-track{
  display:block; width:100%; box-sizing:border-box;
  background:#FFF7DC; border:3px solid var(--cq-ink); border-radius:999px;
  height:20px; overflow:hidden;
  box-shadow:inset 0 3px 0 rgba(0,0,0,.08), 0 3px 0 var(--cq-ink);
  margin:6px 0 10px; position:relative;
}
.cq-avatar-card .xp-track > span{
  display:block; height:100%; min-width:6px; box-sizing:border-box;
  background: repeating-linear-gradient(45deg,#5DD865 0,#5DD865 8px,#2BAE3A 8px,#2BAE3A 16px);
  border-right:3px solid var(--cq-ink);
  transition:width .4s ease;
}
.cq-avatar-card .xp-text{
  display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
  font-family:'Lilita One',system-ui; font-size:11px; color:#5a4a2a; letter-spacing:1px;
  margin-bottom:10px;
}
.cq-avatar-card .xp-text .label{ color:var(--cq-orange-d); }
.cq-avatar-card .xp-text .val{ color:var(--cq-ink); }
.cq-avatar-card .selos{
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap; clear:both; padding-top:6px;
}
.cq-avatar-card .selos .selo{
  display:inline-flex; align-items:center; gap:4px;
  border:3px solid; border-radius:999px; padding:5px 10px;
  font-family:'Lilita One',system-ui; font-size:11px;
}
.cq-avatar-card .selos .selo.teal  { background:#D4F5F1; color:#0E5853; border-color:#15807A; box-shadow:0 3px 0 #15807A; }
.cq-avatar-card .selos .selo.orange{ background:#FFE9C2; color:#7A4F00; border-color:#9F4E00; box-shadow:0 3px 0 #9F4E00; }
.cq-avatar-card .selos .selo.violet{ background:#E9DCFF; color:#3F1F8F; border-color:#3F1F8F; box-shadow:0 3px 0 #3F1F8F; }

/* === BANNERS empilhados à direita === */
.cq-game-banners{ display:grid; gap:12px; }
.cq-game-banners > .cq-banner{ margin-bottom:0; }

/* ============================================================
   SPRINT 42.1 - Ajustes: menu, evolucao na loja, status social
   ============================================================ */
/* Desafio/Evento: 1 banner por linha (largura total) para nao espremer o titulo */
#wrapper-jogo .cq-game-banners{ grid-template-columns:1fr !important; }
.cq-banner > div[style*="flex:1"]{ min-width:0; flex:1 1 auto; }
.cq-banner .cq-recompensa-box{ flex-shrink:0; }
/* Banners com altura consistente e conteudo alinhado ao topo */
.cq-game-banners{ align-items:stretch; }
.cq-game-banners > .cq-banner{ align-items:flex-start; }
.cq-banner .emoji-box{ flex-shrink:0; align-self:center; }
.cq-banner > div[style*="flex:1"]{ align-self:center; }
.cq-banner .cq-recompensa-box{ flex-shrink:0; align-self:center; align-items:flex-end; }
.cq-banner .titulo{ overflow-wrap:break-word; word-break:normal; }

/* Botao EVOLUIR (comprar de novo o pet ja adquirido) */
.cq-btn-evoluir{
  display:block; width:100%; margin-top:6px;
  font-family:'Lilita One',system-ui; font-size:13px; letter-spacing:.5px;
  color:#fff; background:linear-gradient(180deg,#a855f7,#7c3aed);
  border:3px solid var(--cq-ink); border-radius:12px; padding:8px 10px;
  box-shadow:0 4px 0 var(--cq-ink); cursor:pointer; transition:transform .1s;
}
.cq-btn-evoluir:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--cq-ink); }
.cq-btn-evoluir.disabled{ background:#cbd5e1; color:#64748b; cursor:not-allowed; box-shadow:0 4px 0 #94a3b8; }
.cq-pet-max{
  display:block; width:100%; margin-top:6px; text-align:center;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:12px;
  color:#7A4F00; background:#FFE066; border:3px solid var(--cq-ink);
  border-radius:12px; padding:7px 8px; box-shadow:0 3px 0 var(--cq-ink);
}

/* Status inline dos pedidos de amizade (sem alert/popup) */
.cq-status-tag{
  display:inline-block; font-family:'Fredoka',sans-serif; font-weight:700; font-size:12px;
  color:#fff; padding:6px 12px; border-radius:12px; border:2px solid var(--cq-ink);
}
.cq-status-tag.pendente{ background:#FF9F1C; }
.cq-status-tag.aceito{ background:#0FB286; }
.cq-status-tag.recusado{ background:#ef4444; }
.cq-status-inline{
  width:100%; margin-top:8px; font-family:'Fredoka',sans-serif; font-size:12px;
  padding:6px 10px; border-radius:10px; text-align:center;
}
.cq-status-inline.erro{ background:#FEE2E2; color:#B91C1C; border:2px solid #B91C1C; }

/* Selo de nivel do pet: raridade fica a ESQUERDA, nivel a DIREITA (sem sobrepor) */
.cq-pet-card{ position:relative; }
.cq-pet-card .raridade{ left:8px; right:auto; }
.cq-pet-card .cq-nivel-badge{
  left:auto !important; right:8px !important; top:8px !important;
  max-width:60%; overflow:hidden; text-overflow:ellipsis;
}

/* Aviso de todas as quests do dia concluidas */
.cq-quest-todas-feitas{
  margin-top:8px; text-align:center; font-family:'Lilita One',system-ui;
  font-size:13px; color:#0a7a52; background:#D8F5E6;
  border:3px solid #0FB286; border-radius:12px; padding:8px 10px;
  box-shadow:0 3px 0 #0a8f6a;
}

/* Botao CAIXA tremendo quando ha mensagem nao lida */
.cq-tem-msg{ animation:none !important; } /* sem tremida - apenas o badge com o numero de mensagens */

/* === BANNER AVENIDA CÍVICA (faixa) === */
.cq-banner-civica{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg,#FF7AD2,#7C4DFF);
  border:4px solid var(--cq-ink); border-radius:22px;
  padding:14px 18px; box-shadow:0 6px 0 var(--cq-ink);
  cursor:pointer; color:#fff; margin-top:14px;
}
.cq-banner-civica:hover{ transform:translateY(-2px); }
.cq-banner-civica .ic{
  width:56px; height:56px; border-radius:14px; background:#fff;
  border:3px solid var(--cq-ink); display:flex; align-items:center; justify-content:center;
  font-size:28px; box-shadow:0 4px 0 var(--cq-ink); flex-shrink:0;
}
.cq-banner-civica .titulo{ font-family:'Lilita One',system-ui; font-size:22px; line-height:1.1; text-shadow:0 2px 0 rgba(0,0,0,.25); }
.cq-banner-civica .sub{ font-family:'Fredoka',sans-serif; font-size:12px; }
.cq-banner-civica .tag{
  display:inline-block; font-family:'Lilita One'; font-size:10px; letter-spacing:2px;
  padding:3px 10px; border-radius:999px; background:rgba(0,0,0,.35); color:#FFE066; border:2px solid var(--cq-ink);
  margin-bottom:4px;
}
.cq-banner-civica .cta{
  background:#FFE066; color:#7A4F00; border:3px solid var(--cq-ink); border-radius:14px;
  padding:8px 14px; font-family:'Lilita One',system-ui; font-size:13px;
  box-shadow:0 4px 0 var(--cq-ink); flex-shrink:0;
}

/* === MASCOTE NO RODAPE DO JOGO === */
.cq-game-mascote{
  position:absolute; left:14px; bottom:14px; z-index:6;
  display:flex; align-items:flex-end; gap:10px; pointer-events:none;
}
.cq-game-mascote img{ width:130px; height:auto; filter: drop-shadow(0 6px 0 rgba(0,0,0,.4)); }
.cq-game-mascote .balao{
  background:#fff; border:4px solid var(--cq-ink); border-radius:18px;
  padding:8px 14px; font-family:'Lilita One',system-ui; font-size:13px; color:var(--cq-ink);
  box-shadow:0 5px 0 var(--cq-ink); margin-bottom:80px; white-space:nowrap;
}

/* === MAPA: 3 colunas no desktop (sobrepoe regra antiga de 3) === */
@media (min-width: 1024px){
  .cq-mapa-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   RESPONSIVO MOBILE - REESCRITO Sprint 23A
   Corrige overlap do HUD topbar no celular. Empilha logo,
   stats em grid 5 colunas, e acoes em linha de 3 botoes.
   ============================================================ */

/* Tablet landscape e abaixo (= 1023px) */
@media (max-width: 1023px){
  #wrapper-jogo.cq-game-wrap{ padding:14px 12px 200px !important; }
  .cq-game-grid{ grid-template-columns: 1fr; gap:12px; }
  /* Topbar empilhado: logo no topo, stats no meio, acoes embaixo */
  .cq-game-topbar{
    grid-template-columns: 1fr !important;
    gap:10px;
    padding:10px;
    background:#fff;
    border:3px solid var(--cq-ink);
    border-radius:18px;
    box-shadow:0 6px 0 var(--cq-ink);
    margin-bottom:12px;
  }
  .cq-game-topbar .cq-game-logo{
    border:none !important;
    box-shadow:none !important;
    padding:0 0 8px 0 !important;
    border-bottom:3px dashed rgba(0,0,0,.18) !important;
    justify-content:center;
  }
  .cq-game-topbar .cq-game-stats{
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    gap:5px !important;
    width:100%;
  }
  .cq-stat--big{
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    padding:8px 2px !important;
    gap:2px !important;
    min-width:0 !important;
    border-width:2.5px !important;
    border-radius:12px !important;
    text-align:center;
  }
  .cq-stat--big .ic{ font-size:18px !important; }
  .cq-stat--big .label{ font-size:8px !important; letter-spacing:.5px !important; opacity:.8; }
  .cq-stat--big .val{ font-size:14px !important; line-height:1; }
  .cq-stat--big .label:last-child{ display:none; } /* esconde sufixo "p/ subir", "dias" */
  .cq-game-topbar .cq-game-acoes{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100%;
  }
  .cq-game-topbar .cq-game-acoes .cq-btn{
    min-width:0; font-size:12px !important; padding:9px 6px !important;
    display:flex; align-items:center; justify-content:center; gap:4px;
  }
  .cq-game-topbar .cq-game-acoes .cq-btn:last-child{ grid-column:auto; }
  /* Sidebar e main viram coluna unica */
  .cq-avatar-card{ padding:14px 12px; }
  .cq-avatar-card .ring{ width:120px; height:120px; }
  .cq-avatar-card .nome-aluno{ font-size:20px; }
  .cq-game-mascote{ display:none; }
  .cq-banner-civica{ flex-direction:row; flex-wrap:wrap; text-align:left; padding:12px 14px; gap:10px; }
  .cq-banner-civica .titulo{ font-size:18px; }
  .cq-banner-civica .sub{ font-size:11px; }
  .cq-banner-civica .cta{ font-size:12px; padding:6px 10px; }
  /* SAIR no topo direito (continuar absoluto sem cobrir o topbar) */
  #wrapper-jogo > #btn-sair-aluno{ top:6px; right:6px; font-size:10px !important; padding:6px 10px !important; }
}

/* === MOBILE PORTRAIT (= 640px) - layout vertical respiravel === */
/* Premissa: tablets/iPads (>=768px) NAO sao afetados. So mesmo celulares. */
@media (max-width: 640px){
  #wrapper-jogo.cq-game-wrap{ padding:10px 10px 200px !important; }

  /* TOPBAR: 3 linhas empilhadas (logo+sair, stats em grid, botoes em grid) */
  .cq-game-topbar{
    padding:12px !important;
    gap:12px !important;
    border-radius:20px !important;
  }

  /* Linha 1: logo maior, centralizada */
  .cq-game-topbar .cq-game-logo{
    padding:4px 8px 12px !important;
    gap:12px !important;
  }
  .cq-game-topbar .cq-game-logo .badge{ width:44px !important; height:44px !important; }
  .cq-game-topbar .cq-game-logo .text .t1{ font-size:22px !important; }
  .cq-game-topbar .cq-game-logo .text .t2{ font-size:9px !important; letter-spacing:1.8px !important; }

  /* Linha 2: stats em GRID 3 colunas (XP / Moedas / Streak) e GRID 2 colunas (Vidas / Power) */
  .cq-game-topbar .cq-game-stats{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    grid-template-rows:auto auto !important;
    gap:8px !important;
    width:100%;
  }
  /* primeiros 3 stats na primeira linha de 3 colunas */
  .cq-stat--big.is-xp,
  .cq-stat--big.is-moedas,
  .cq-stat--big.is-streak{ grid-row:1; }
  /* ultimos 2 stats na segunda linha ocupando 1.5 colunas cada */
  .cq-stat--big.is-vidas{ grid-row:2; grid-column:span 1.5; }
  .cq-stat--big.is-power{ grid-row:2; grid-column:span 1.5; }
  /* Como CSS Grid nao aceita 1.5, ajusto via template alternativo: */
  .cq-game-topbar .cq-game-stats{
    grid-template-columns:repeat(6,1fr) !important;
  }
  .cq-stat--big.is-xp{ grid-column:span 2 !important; }
  .cq-stat--big.is-moedas{ grid-column:span 2 !important; }
  .cq-stat--big.is-streak{ grid-column:span 2 !important; }
  .cq-stat--big.is-vidas{ grid-column:span 3 !important; }
  .cq-stat--big.is-power{ grid-column:span 3 !important; }

  /* Stats internos maiores e mais legiveis */
  .cq-stat--big{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:10px 12px !important;
    gap:8px !important;
    border-width:3px !important;
    border-radius:14px !important;
    min-height:54px;
    text-align:left;
  }
  .cq-stat--big .ic{ font-size:22px !important; }
  .cq-stat--big .label{ font-size:9px !important; letter-spacing:1px !important; opacity:.85; }
  .cq-stat--big .val{ font-size:18px !important; line-height:1.05; font-weight:800; }
  .cq-stat--big .label:last-child{ display:none; } /* esconde sufixo "p/ subir" etc */

  /* Linha 3: botoes em GRID 3 colunas, generosos */
  .cq-game-topbar .cq-game-acoes{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100%;
  }
  .cq-game-topbar .cq-game-acoes .cq-btn{
    font-size:12px !important;
    padding:12px 4px !important;
    min-height:46px;
    min-width:0 !important;
    letter-spacing:.5px;
    border-radius:14px !important;
    display:flex; align-items:center; justify-content:center; gap:4px;
  }
  .cq-game-topbar .cq-game-acoes .cq-btn:last-child{ grid-column:auto; }

  /* SAIR fixo no canto, maior pra ser clicavel */
  #wrapper-jogo > #btn-sair-aluno{
    top:10px !important; right:10px !important;
    font-size:11px !important; padding:9px 14px !important;
    border-radius:12px !important; z-index:30;
  }

  /* Avatar e banners */
  .cq-avatar-card .ring{ width:110px; height:110px; }
  .cq-avatar-card .nome-aluno{ font-size:18px; }
  .cq-banner-civica{ flex-direction:column; text-align:center; }
}

/* === MOBILE BEM PEQUENO (= 380px - iPhone SE, Galaxy S antigo) === */
@media (max-width: 380px){
  .cq-game-topbar{ padding:10px !important; gap:10px !important; }
  .cq-game-topbar .cq-game-logo .badge{ width:38px !important; height:38px !important; }
  .cq-game-topbar .cq-game-logo .text .t1{ font-size:19px !important; }
  .cq-game-topbar .cq-game-logo .text .t2{ font-size:8px !important; letter-spacing:1.4px !important; }
  .cq-stat--big{ padding:8px 8px !important; min-height:48px; border-radius:12px !important; }
  .cq-stat--big .ic{ font-size:18px !important; }
  .cq-stat--big .label{ font-size:8px !important; }
  .cq-stat--big .val{ font-size:16px !important; }
  .cq-game-topbar .cq-game-acoes .cq-btn{ font-size:11px !important; padding:11px 2px !important; min-height:42px; }
}

/* Modo alto contraste (Sprint 21C) */
body.tema-contraste .cq-avatar-card,
body.tema-contraste .cq-stat--big,
body.tema-contraste .cq-game-logo,
body.tema-contraste .cq-banner-civica{
  background:#000 !important; color:#FFE066 !important;
  border-color:#FFE066 !important; box-shadow:0 6px 0 #FFE066 !important;
}
body.tema-contraste .cq-avatar-card *,
body.tema-contraste .cq-stat--big *,
body.tema-contraste .cq-banner-civica *{ color:#FFE066 !important; }

/* ============================================================
   SPRINT 21E - Morro verde no rodape do wrapper-jogo
   Replica o .cq-hill do login dentro do area pos-login, com
   Mascote de pe na grama (mesmo visual da tela de login).
   ============================================================ */
.cq-game-hill{
  position:absolute; left:50%; right:auto; bottom:0;
  width:100vw; max-width:100%; height:220px;
  transform:translateX(-50%);
  background: linear-gradient(180deg, var(--cq-grass-1) 0%, var(--cq-grass-2) 60%, var(--cq-grass-3) 100%);
  border-top:6px solid var(--cq-ink);
  border-top-left-radius:50% 30%; border-top-right-radius:50% 30%;
  z-index:1; pointer-events:none;
}
/* Quando a viewport e maior que o wrapper, o morro acompanha o viewport via fixed-like trick */
@media (min-width: 1281px){
  .cq-game-hill{ width:100vw; max-width:100vw; }
}
/* Sprint 21E - garante que o conteudo principal renderiza ACIMA do morro */
.cq-game-wrap > #hud-aluno-topo,
.cq-game-wrap > #area-boas-vindas,
.cq-game-wrap > #area-arena{
  position:relative; z-index:2;
}
.cq-game-hill .tree{ position:absolute; top:-22px; font-size:30px; }
.cq-game-hill .tree.t1{ left:6%; }
.cq-game-hill .tree.t2{ left:24%; top:-14px; font-size:24px; }
.cq-game-hill .tree.t3{ left:46%; top:-18px; }
.cq-game-hill .tree.t4{ left:66%; top:-12px; font-size:22px; }
.cq-game-hill .tree.t5{ left:88%; }

/* Mascote do jogo sobe pra ficar de pe na relva (desativado por SECOM) */
.cq-game-mascote{
  position:absolute; left:24px; bottom:18px; z-index:6;
  display:flex; align-items:flex-end; gap:10px; pointer-events:none;
}
.cq-game-mascote img{ width:150px; height:auto; filter: drop-shadow(0 6px 0 rgba(0,0,0,.4)); }
.cq-game-mascote .balao{
  background:#fff; border:4px solid var(--cq-ink); border-radius:18px;
  padding:8px 14px; font-family:'Lilita One',system-ui; font-size:13px; color:var(--cq-ink);
  box-shadow:0 5px 0 var(--cq-ink); margin-bottom:110px; white-space:nowrap; position:relative;
}
.cq-game-mascote .balao::before{
  content:""; position:absolute; right:-14px; bottom:14px; width:0; height:0;
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  border-left:14px solid var(--cq-ink);
}
.cq-game-mascote .balao::after{
  content:""; position:absolute; right:-8px; bottom:16px; width:0; height:0;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
  border-left:10px solid #fff;
}

/* Mobile: oculta morro+mascote para economizar tela vertical */
@media (max-width: 1023px){
  .cq-game-hill{ height:80px; }
  .cq-game-hill .tree{ font-size:16px; top:-10px; }
  .cq-game-mascote{ display:none; }
}

/* Alto contraste: morro vira preto liso */
body.tema-contraste .cq-game-hill{
  background:#000 !important;
  border-top-color:#FFE066 !important;
}

/* ============================================================
   SPRINT 26 - ARENA DE PERGUNTAS CARTOON
   Replica mockup aprovado pelo gestor (Civiquest Arena Quiz.html)
   ============================================================ */

/* Topbar Arena (VOLTAR + Missao + Timer), alinhada ao mesmo container do card de pergunta */
.cq-arena-topbar{
  position:relative; z-index:5;
  width:100%; max-width:880px; margin:0 auto;
  padding:14px 16px 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:16px;
}
.cq-btn-back{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:4px solid var(--cq-ink); border-radius:16px;
  padding:10px 18px; box-shadow:0 5px 0 var(--cq-ink);
  font-family:'Lilita One',sans-serif; font-size:14px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cq-ink); cursor:pointer;
  transition:transform .08s, box-shadow .08s;
}
.cq-btn-back:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--cq-ink); }

.cq-mission-tag{
  background:#FFE066; border:4px solid var(--cq-ink); border-radius:14px;
  padding:8px 18px; box-shadow:0 4px 0 var(--cq-ink);
  font-family:'Lilita One',sans-serif; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cq-ink);
  display:inline-flex; align-items:center; gap:8px;
}

.cq-timer{
  background:#fff; border:4px solid var(--cq-ink); border-radius:18px;
  padding:8px 16px; box-shadow:0 5px 0 var(--cq-ink);
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Lilita One',sans-serif; min-width:130px; justify-content:center;
}
.cq-timer .ic{ font-size:22px; }
.cq-timer .val{ font-size:22px; color:var(--cq-ink); }
.cq-timer.danger{
  animation:cq-pulse 0.6s ease-in-out infinite;
  border-color:var(--cq-red);
}
.cq-timer.danger .val{ color:var(--cq-red); }
@keyframes cq-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

/* Question card */
.cq-arena-area{
  position:relative; z-index:5;
  width:100%; max-width:880px; margin:0 auto;
  display:flex; flex-direction:column; gap:18px;
  padding:0 16px 40px;
}
.cq-question-card{
  background:#fff; border:5px solid var(--cq-ink); border-radius:24px;
  box-shadow:0 8px 0 var(--cq-ink), 0 14px 24px rgba(0,0,0,.12);
  padding:24px 28px; position:relative;
}
.cq-question-card::before{
  content:"PERGUNTA"; position:absolute; top:-18px; left:24px;
  background:var(--cq-orange); color:#fff; border:4px solid var(--cq-ink);
  padding:6px 16px; border-radius:12px; box-shadow:0 4px 0 var(--cq-ink);
  font-family:'Lilita One',sans-serif; font-size:14px; letter-spacing:2px;
}
.cq-question-card p.cq-enunciado{
  margin:14px 0 16px;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:18px;
  line-height:1.5; color:var(--cq-ink); text-align:center;
}
.cq-listen-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,#B388FF,#7C4DFF); color:#fff;
  border:3px solid var(--cq-ink); border-radius:999px;
  padding:8px 18px; box-shadow:0 4px 0 #3F1F8F;
  font-family:'Lilita One',sans-serif; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer;
  transition:transform .08s, box-shadow .08s;
}
.cq-listen-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #3F1F8F; }

.cq-video-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,#FF7A8A,#E71D36); color:#fff;
  border:3px solid var(--cq-ink); border-radius:999px;
  padding:8px 18px; box-shadow:0 4px 0 var(--cq-red-d);
  font-family:'Lilita One',sans-serif; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; position:relative;
  transition:transform .08s, box-shadow .08s;
  animation:cq-videoGlow 1.8s ease-in-out infinite;
}
.cq-video-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--cq-red-d); }
.cq-video-btn .video-bonus{
  background:#FFE066; color:var(--cq-ink); border:2px solid var(--cq-ink);
  border-radius:999px; padding:2px 8px; font-size:11px; box-shadow:0 2px 0 #9F7B00;
}
@keyframes cq-videoGlow{
  0%,100%{ box-shadow:0 4px 0 var(--cq-red-d), 0 0 0 0 rgba(231,29,54,.6); }
  50%   { box-shadow:0 4px 0 var(--cq-red-d), 0 0 0 12px rgba(231,29,54,0); }
}

/* Opções A B C D */
.cq-options{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
@media (max-width:720px){ .cq-options{ grid-template-columns:1fr; } }

.cq-opt{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(180deg,#5DC2E0,#2A588E); color:#fff;
  border:4px solid var(--cq-ink); border-radius:18px;
  padding:14px 18px;
  box-shadow:0 6px 0 #15406B, 0 10px 18px rgba(0,0,0,.15);
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:16px;
  text-align:left; cursor:pointer; min-height:64px;
  transition:transform .12s, box-shadow .12s;
  width:100%;
}
.cq-opt:hover{ transform:translateY(-3px); box-shadow:0 9px 0 #15406B, 0 14px 24px rgba(0,0,0,.18); }
.cq-opt:active{ transform:translateY(4px); box-shadow:0 2px 0 #15406B; }
.cq-opt .letra{
  flex-shrink:0; width:36px; height:36px; border-radius:10px;
  background:#FFE066; color:var(--cq-ink); border:3px solid var(--cq-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Lilita One',sans-serif; font-size:20px; box-shadow:0 3px 0 #A07000;
}
.cq-opt:nth-child(1){ background:linear-gradient(180deg,#5DC2E0,#2A588E); box-shadow:0 6px 0 #15406B, 0 10px 18px rgba(0,0,0,.15); }
.cq-opt:nth-child(2){ background:linear-gradient(180deg,#FF7AD2,#C040A0); box-shadow:0 6px 0 #7A1F60, 0 10px 18px rgba(0,0,0,.15); }
.cq-opt:nth-child(2):active{ box-shadow:0 2px 0 #7A1F60; }
.cq-opt:nth-child(3){ background:linear-gradient(180deg,#5DD865,#2BAE3A); box-shadow:0 6px 0 #157A21, 0 10px 18px rgba(0,0,0,.15); }
.cq-opt:nth-child(3):active{ box-shadow:0 2px 0 #157A21; }
.cq-opt:nth-child(4){ background:linear-gradient(180deg,#B18AFF,#7C4DFF); color:#fff; box-shadow:0 6px 0 #4B2E9E, 0 10px 18px rgba(0,0,0,.15); }
.cq-opt:nth-child(4):active{ box-shadow:0 2px 0 #4B2E9E; }


.cq-opt.correct{ animation:cq-correctPop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes cq-correctPop{ 0%{transform:scale(1)} 40%{transform:scale(1.1)} 100%{transform:scale(1.05)} }
.cq-opt.wrong{ animation:cq-shake .5s; }
@keyframes cq-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(8px); }
  60%{ transform:translateX(-6px); }
  80%{ transform:translateX(6px); }
}

/* Modal de Video */
.cq-video-modal{
  position:fixed; inset:0; z-index:60; display:none;
  background:rgba(0,0,0,.85); align-items:center; justify-content:center; padding:20px;
}
.cq-video-modal.show{ display:flex; animation:cq-fadeIn .25s; }
.cq-video-modal .frame{
  background:#000; border:5px solid var(--cq-ink); border-radius:18px;
  box-shadow:0 8px 0 var(--cq-ink), 0 16px 40px rgba(0,0,0,.5);
  width:min(720px, 92vw); aspect-ratio:16/9; position:relative;
  overflow:hidden;
}
.cq-video-modal iframe{ width:100%; height:100%; border:0; }
.cq-video-modal .close{
  position:absolute; top:-20px; right:-12px;
  background:#FFE066; border:4px solid var(--cq-ink); border-radius:50%;
  width:42px; height:42px; cursor:pointer; box-shadow:0 4px 0 var(--cq-ink);
  font-family:'Lilita One',sans-serif; font-size:20px; color:var(--cq-ink);
  z-index:5;
}

/* Modal acerto/erro */
.cq-quiz-modal{
  position:fixed; inset:0; z-index:50; display:none;
  background:radial-gradient(circle at center,rgba(0,0,0,.45),rgba(0,0,0,.7));
  align-items:center; justify-content:center; padding:20px;
  /* Conteudo mais alto que a tela (ex.: pacote com 3 cartas no celular) rola em vez de cortar */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.cq-quiz-modal.show{ display:flex; animation:cq-fadeIn .25s; }
@keyframes cq-fadeIn{ from{opacity:0} to{opacity:1} }

.cq-quiz-card{
  background:#fff; border:6px solid var(--cq-ink); border-radius:30px;
  box-shadow:0 12px 0 var(--cq-ink), 0 20px 60px rgba(0,0,0,.5);
  padding:28px 32px; max-width:480px; width:100%;
  text-align:center; position:relative;
  animation:cq-pop .5s cubic-bezier(.34,1.56,.64,1);
  /* margin:auto centraliza quando cabe e ancora no topo (rolavel) quando nao cabe */
  margin:auto;
}
@keyframes cq-pop{
  0%{transform:scale(0) rotate(-10deg)}
  60%{transform:scale(1.05) rotate(2deg)}
  100%{transform:scale(1) rotate(0)}
}
.cq-quiz-card.acerto{ background:linear-gradient(180deg,#D4F5C8,#FFFFFF); }
.cq-quiz-card.erro{ background:linear-gradient(180deg,#FFD6DA,#FFFFFF); }
.cq-quiz-card h2{
  font-family:'Lilita One',sans-serif; font-size:38px; margin:6px 0 4px;
  letter-spacing:1px;
}
.cq-quiz-card.acerto h2{ color:var(--cq-green-d, #157A21); text-shadow:0 3px 0 #B3F0BD; }
.cq-quiz-card.erro h2{ color:var(--cq-red-d); text-shadow:0 3px 0 #FFB7C0; }
.cq-quiz-card .msg{
  font-family:'Fredoka',sans-serif; font-size:16px; line-height:1.45;
  color:var(--cq-ink); margin:8px 0 16px;
}
.cq-rewards{ display:flex; justify-content:center; gap:14px; margin:10px 0 18px; flex-wrap:wrap; }
.cq-reward{
  background:#FFE066; border:3px solid var(--cq-ink); border-radius:14px;
  padding:8px 14px; box-shadow:0 4px 0 var(--cq-ink);
  font-family:'Lilita One',sans-serif; font-size:18px; color:var(--cq-ink);
  display:inline-flex; align-items:center; gap:6px;
  animation:cq-rise .5s .15s both;
}
.cq-reward.xp{ background:linear-gradient(180deg,#5DC2E0,#2A588E); color:#fff; box-shadow:0 4px 0 #15406B; }
.cq-reward.coin{ background:linear-gradient(180deg,#FFE066,#FEC42B); color:var(--cq-ink); box-shadow:0 4px 0 #9F7B00; }
@keyframes cq-rise{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.cq-quiz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(180deg,#5DD865,#2BAE3A); color:#fff;
  border:4px solid var(--cq-ink); border-radius:18px;
  padding:14px 28px; box-shadow:0 6px 0 var(--cq-green-d, #157A21);
  font-family:'Lilita One',sans-serif; font-size:18px;
  text-transform:uppercase; letter-spacing:.1em;
  cursor:pointer; transition:transform .08s, box-shadow .08s;
  text-shadow:0 2px 0 rgba(0,0,0,.25); margin-top:6px;
}
.cq-quiz-btn:active{ transform:translateY(5px); box-shadow:0 1px 0 var(--cq-green-d, #157A21); }
.cq-quiz-card.erro .cq-quiz-btn{
  background:linear-gradient(180deg,#FF7A8A,#E71D36);
  box-shadow:0 6px 0 var(--cq-red-d);
}
.cq-quiz-card.erro .cq-quiz-btn:active{ box-shadow:0 1px 0 var(--cq-red-d); }

.cq-quiz-emoji{
  font-size:80px; line-height:1; display:inline-block;
  animation:cq-bounce 1.2s ease-in-out infinite;
}
@keyframes cq-bounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.cq-stars{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cq-star{
  position:absolute; font-size:24px;
  animation:cq-twinkle 1.5s ease-in-out infinite;
}
@keyframes cq-twinkle{
  0%,100%{ opacity:.3; transform:scale(.8) rotate(0); }
  50%   { opacity:1;  transform:scale(1.3) rotate(180deg); }
}
.cq-star:nth-child(1){ top:20px;  left:30px;  animation-delay:0s; }
.cq-star:nth-child(2){ top:30px;  right:30px; animation-delay:.3s; }
.cq-star:nth-child(3){ bottom:40px; left:40px; animation-delay:.6s; }
.cq-star:nth-child(4){ bottom:30px; right:40px; animation-delay:.9s; }
.cq-star:nth-child(5){ top:50%; left:10px; animation-delay:.4s; }
.cq-star:nth-child(6){ top:50%; right:10px; animation-delay:.7s; }

/* Responsive mobile arena */
@media (max-width:720px){
  .cq-arena-topbar{ padding:12px 10px 0; }
  .cq-btn-back{ padding:8px 12px; font-size:12px; }
  .cq-mission-tag{ font-size:11px; padding:6px 12px; }
  .cq-timer{ padding:6px 12px; min-width:110px; }
  .cq-timer .val{ font-size:18px; }
  .cq-arena-area{ padding:0 12px 30px; }
  .cq-question-card{ padding:18px 16px; }
  .cq-question-card p.cq-enunciado{ font-size:15px; }
  .cq-opt{ padding:12px 14px; min-height:54px; font-size:14px; }
  .cq-opt .letra{ width:32px; height:32px; font-size:16px; }
  .cq-quiz-card{ padding:20px; border-radius:24px; }
  .cq-quiz-card h2{ font-size:28px; }
  .cq-quiz-card .msg{ font-size:14px; }
  .cq-quiz-emoji{ font-size:60px; }
}

/* ============================================================
   SPRINT 24 - LOJINHA CARTOON (Pets + Cards + Titulos + Avatares)
   ============================================================ */

.cq-lojinha-modal{
  position:fixed; inset:0; z-index:80; display:none;
  background:rgba(0,0,0,.7); padding:20px;
  align-items:flex-start; justify-content:center;
  overflow-y:auto;
}
.cq-lojinha-modal.show{ display:flex; animation:cq-fadeIn .25s; }
.cq-lojinha-card{
  background:#fff; border:5px solid var(--cq-ink); border-radius:24px;
  box-shadow:0 12px 0 var(--cq-ink), 0 18px 40px rgba(0,0,0,.4);
  width:min(960px, 96vw); margin:30px auto; padding:0;
  position:relative; overflow:hidden;
}
.cq-close-x{
  position:absolute; top:14px; right:14px; z-index:10;
  background:#FFE066; border:3px solid var(--cq-ink); border-radius:50%;
  width:42px; height:42px; cursor:pointer; box-shadow:0 4px 0 var(--cq-ink);
  font-family:'Lilita One',sans-serif; font-size:20px; color:var(--cq-ink);
}

.cq-lojinha-head{
  background:linear-gradient(180deg, #FFE066 0%, #FF9F1C 100%);
  border-bottom:5px solid var(--cq-ink);
  padding:18px 70px 18px 24px; /* padding-right grande pra nao colidir com o X */
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.cq-lojinha-head h3{
  font-family:'Lilita One',sans-serif; font-size:24px; margin:0;
  color:var(--cq-ink); letter-spacing:1px;
}
.cq-saldo{
  background:#fff; border:3px solid var(--cq-ink); border-radius:999px;
  padding:6px 16px; box-shadow:0 4px 0 var(--cq-ink);
  font-family:'Lilita One',sans-serif; color:var(--cq-ink); font-size:16px;
}
.cq-saldo b{ color:var(--cq-orange-d); font-size:18px; }
@media (max-width: 640px){
  .cq-lojinha-head{ padding:14px 60px 14px 18px; }
}

.cq-lojinha-tabs{
  display:flex; gap:6px; padding:14px 20px; flex-wrap:wrap;
  background:#FFF7DC; border-bottom:3px dashed rgba(0,0,0,.18);
}
.cq-tab{
  background:#fff; border:3px solid var(--cq-ink); border-radius:14px;
  padding:8px 14px; cursor:pointer; box-shadow:0 4px 0 var(--cq-ink);
  font-family:'Lilita One',sans-serif; font-size:13px;
  color:var(--cq-ink); display:inline-flex; align-items:center; gap:8px;
  transition:transform .08s, box-shadow .08s;
}
.cq-tab:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--cq-ink); }
.cq-tab:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--cq-ink); }
.cq-tab.active{
  background:linear-gradient(180deg, #5DC2E0, #2A588E); color:#fff;
  box-shadow:0 4px 0 #15406B; text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.cq-tab-count{
  background:#FFE066; color:var(--cq-ink); border:2px solid var(--cq-ink);
  border-radius:999px; padding:2px 8px; font-size:10px;
}
.cq-tab.active .cq-tab-count{ background:#fff; }

.cq-aba{ padding:18px 24px 24px; max-height:60vh; overflow-y:auto; }

/* Grid de Pets */
.cq-pet-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:14px;
}
.cq-pet-card{
  background:#fff; border:4px solid var(--cq-ink); border-radius:18px;
  padding:14px 12px; text-align:center; position:relative;
  box-shadow:0 5px 0 var(--cq-ink);
  transition:transform .12s, box-shadow .12s;
}
.cq-pet-card:hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--cq-ink); }
.cq-pet-card img{ width:100%; height:130px; object-fit:contain; display:block; margin:0 auto 8px; }
.cq-pet-card .nome{ font-family:'Lilita One',sans-serif; font-size:15px; color:var(--cq-ink); margin-bottom:4px; }
.cq-pet-card .desc{ font-family:'Fredoka',sans-serif; font-size:11px; color:#5a4a2a; line-height:1.3; margin-bottom:10px; min-height:30px; }
.cq-pet-card .raridade{
  position:absolute; top:8px; left:8px;
  font-family:'Lilita One',sans-serif; font-size:9px; letter-spacing:1.5px;
  padding:3px 8px; border-radius:999px; border:2px solid var(--cq-ink);
}
.cq-raridade-comum   { background:#E2E8F0; color:#475569; box-shadow:0 2px 0 #475569; }
.cq-raridade-raro    { background:#BFDBFE; color:#1E3A8A; box-shadow:0 2px 0 #1E3A8A; }
.cq-raridade-epico   { background:#E9D5FF; color:#6B21A8; box-shadow:0 2px 0 #6B21A8; }
.cq-raridade-lendario{ background:#FED7AA; color:#9A3412; box-shadow:0 2px 0 #9A3412; }
.cq-raridade-mitico  { background:linear-gradient(135deg, #FBCFE8, #E11D48); color:#fff; box-shadow:0 2px 0 #9F1239; border-color:#9F1239; }

.cq-btn-comprar{
  display:block; width:100%;
  background:linear-gradient(180deg, #5DD865, #2BAE3A); color:#fff;
  border:3px solid var(--cq-ink); border-radius:12px;
  padding:8px 12px; box-shadow:0 4px 0 var(--cq-green-d, #157A21);
  font-family:'Lilita One',sans-serif; font-size:13px;
  text-transform:uppercase; cursor:pointer; text-shadow:0 2px 0 rgba(0,0,0,.25);
  transition:transform .08s;
}
.cq-btn-comprar:hover{ transform:translateY(-2px); }
.cq-btn-comprar:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--cq-green-d, #157A21); }
.cq-btn-comprar.disabled{ background:linear-gradient(180deg, #94A3B8, #64748B); cursor:not-allowed; box-shadow:0 4px 0 #334155; }
.cq-btn-equipar{
  display:block; width:100%;
  background:linear-gradient(180deg, #5BE0D2, #15807A); color:#fff;
  border:3px solid var(--cq-ink); border-radius:12px;
  padding:8px 12px; box-shadow:0 4px 0 #0F5D58;
  font-family:'Lilita One',sans-serif; font-size:13px;
  text-transform:uppercase; cursor:pointer; text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.cq-btn-equipar.equipado{ background:linear-gradient(180deg, #FF7AD2, #C040A0); box-shadow:0 4px 0 #7A1F60; }

/* Pacote de cards */
.cq-pacote-cards{
  background:linear-gradient(135deg, #FF7AD2, #7C4DFF); color:#fff;
  border:4px solid var(--cq-ink); border-radius:18px;
  padding:14px 18px; margin-bottom:16px; box-shadow:0 6px 0 var(--cq-ink);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.cq-pacote-info{ display:flex; align-items:center; gap:14px; }
.cq-pacote-emoji{
  width:64px; height:64px; background:#fff; border:3px solid var(--cq-ink); border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:36px;
  box-shadow:0 4px 0 var(--cq-ink); flex-shrink:0;
}
.cq-pacote-info h4{ font-family:'Lilita One',sans-serif; font-size:18px; margin:0 0 4px; text-shadow:0 2px 0 rgba(0,0,0,.25); }
.cq-pacote-info p{ font-family:'Fredoka',sans-serif; font-size:13px; margin:0; opacity:.95; }

.cq-album-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
}
.cq-album-card{
  position:relative; aspect-ratio:300/420;
  border-radius:14px; overflow:hidden; cursor:pointer;
  transition:transform .12s;
}
.cq-album-card:hover{ transform:translateY(-3px); }
.cq-album-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.cq-album-card.bloqueado{ filter: grayscale(1) brightness(.5); }
.cq-album-card.bloqueado::after{
  content:"?"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Lilita One',sans-serif; font-size:48px; color:#fff;
  background:rgba(0,0,0,.3);
}
/* 24/08/2026 - o badge de quantidade era cortado pelo canto arredondado do card
   (border-radius + overflow hidden). Afastado da curva e acima de tudo. */
.cq-album-card .qtd-badge{
  position:absolute; top:8px; right:13px; z-index:4;
  background:#FFE066; color:var(--cq-ink); border:2px solid var(--cq-ink);
  border-radius:999px; padding:1px 7px;
  font-family:'Lilita One',sans-serif; font-size:10px; line-height:1.5;
  box-shadow:0 2px 0 rgba(0,0,0,.3);
}

/* Titulos */
.cq-titulo-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}
.cq-titulo-card{
  background:#fff; border:4px solid var(--cq-ink); border-radius:16px;
  padding:12px 14px; position:relative; box-shadow:0 5px 0 var(--cq-ink);
  display:flex; flex-direction:column; gap:6px;
}
.cq-titulo-card.bloqueado{ opacity:.55; }
.cq-titulo-card .topo{ display:flex; align-items:center; gap:10px; }
.cq-titulo-card .emoji{
  font-size:32px; width:48px; height:48px; flex-shrink:0;
  background:#FFE066; border:3px solid var(--cq-ink); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 0 var(--cq-ink);
}
.cq-titulo-card .nome{ font-family:'Lilita One',sans-serif; font-size:14px; color:var(--cq-ink); line-height:1.2; }
.cq-titulo-card .desc{ font-family:'Fredoka',sans-serif; font-size:11px; color:#5a4a2a; }
.cq-titulo-card .cat{
  font-family:'Lilita One',sans-serif; font-size:9px; letter-spacing:1px;
  background:#E2E8F0; color:#475569; padding:2px 8px; border-radius:999px;
  border:2px solid var(--cq-ink); display:inline-block; margin-top:4px;
}

/* Mobile */
@media (max-width: 640px){
  .cq-lojinha-card{ margin:10px auto; }
  .cq-lojinha-head{ padding:14px 18px; }
  .cq-lojinha-head h3{ font-size:18px; }
  .cq-lojinha-tabs{ padding:10px; }
  .cq-tab{ font-size:11px; padding:6px 10px; }
  .cq-aba{ padding:12px; max-height:55vh; }
  .cq-pet-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; }
  .cq-pet-card img{ height:90px; }
  .cq-album-grid{ grid-template-columns:repeat(3, 1fr); gap:8px; }
  .cq-titulo-grid{ grid-template-columns:1fr; }
  .cq-pacote-cards{ flex-direction:column; align-items:stretch; text-align:center; }
  .cq-pacote-info{ flex-direction:column; }
}

/* Sprint 24 - Aba "Em breve" para Avatares especiais */
.cq-em-breve{
  background:linear-gradient(135deg, #FFF7DC, #FFE066);
  border:4px dashed var(--cq-ink); border-radius:18px;
  padding:30px 24px; text-align:center;
  margin:20px auto; max-width:480px;
}
.cq-em-breve-emoji{
  font-size:64px; line-height:1; margin-bottom:8px;
  animation:cq-bounce 2s ease-in-out infinite;
}
.cq-em-breve h3{
  font-family:'Lilita One',sans-serif; font-size:28px; margin:6px 0 12px;
  color:var(--cq-orange-d); letter-spacing:1px; text-shadow:0 3px 0 #FFB957;
}
.cq-em-breve p{
  font-family:'Fredoka',sans-serif; font-size:15px; color:#5a4a2a;
  line-height:1.5; margin:0;
}
.cq-em-breve b{ color:var(--cq-red-d); }

/* JS antigo do grade-loja agora oculto (avatares antigos sem suporte ao novo layout) */
.cq-grade-velha{ display:none; }

/* ============================================================
   SPRINT 25 - MODAL PERFIL CARTOON
   ============================================================ */

.cq-perfil-head{
  background:linear-gradient(180deg, #BFDBFE 0%, #2A588E 100%);
  border-bottom:5px solid var(--cq-ink);
  padding:20px 70px 20px 24px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.cq-perfil-ring{
  width:110px; height:110px; flex-shrink:0;
  border-radius:50%;
  background: radial-gradient(circle, #FFE066 0%, #FF9F1C 70%, #E27A0E 100%);
  border:5px solid var(--cq-ink); box-shadow:0 5px 0 var(--cq-ink);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.cq-perfil-ring img{ width:84%; height:84%; border-radius:50%; object-fit:cover; }
.cq-perfil-ring .lvl{
  position:absolute; bottom:-4px; right:-4px;
  background:#FFE066; border:3px solid var(--cq-ink); border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-family:'Lilita One',sans-serif; font-size:16px; color:#7A4F00;
  box-shadow:0 3px 0 var(--cq-ink);
}
.cq-perfil-info{ flex:1; min-width:200px; color:#fff; }
.cq-perfil-info .tier-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:#FFF7DC; color:#7A4F00; border:3px solid var(--cq-ink);
  padding:3px 12px; border-radius:999px;
  font-family:'Lilita One',sans-serif; font-size:10px; letter-spacing:1.5px;
  box-shadow:0 3px 0 var(--cq-ink); margin-bottom:6px;
}
.cq-perfil-info h3{
  font-family:'Lilita One',sans-serif; font-size:24px; margin:0 0 2px;
  color:#fff; letter-spacing:1px; text-shadow:0 2px 0 rgba(0,0,0,.3);
}
.cq-perfil-info p{
  font-family:'Fredoka',sans-serif; font-size:12px;
  color:#fff; opacity:.9; margin:0;
}
.cq-titulo-ativo{
  display:inline-block; margin-top:6px !important;
  background:#FFE066; color:var(--cq-ink); border:2px solid var(--cq-ink);
  padding:2px 10px; border-radius:999px;
  font-family:'Lilita One',sans-serif; font-size:11px;
  box-shadow:0 2px 0 var(--cq-ink); opacity:1 !important;
}
.cq-titulo-ativo b{ color:var(--cq-red-d); }

/* Cards de slot na Visão Geral */
.cq-perfil-visao-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}
.cq-perfil-slot{
  background:#fff; border:4px solid var(--cq-ink); border-radius:18px;
  padding:14px; box-shadow:0 5px 0 var(--cq-ink);
  display:flex; flex-direction:column; gap:8px;
}
.cq-perfil-slot h4{
  font-family:'Lilita One',sans-serif; font-size:13px; letter-spacing:1.5px;
  color:var(--cq-orange-d); margin:0;
  display:flex; align-items:center; gap:6px;
}
.cq-perfil-slot .conteudo{
  display:flex; align-items:center; gap:10px; flex:1;
}
.cq-perfil-slot .conteudo img{
  width:60px; height:60px; object-fit:contain;
  background:#FFF7DC; border:3px solid var(--cq-ink); border-radius:14px;
  box-shadow:0 3px 0 var(--cq-ink);
}
.cq-perfil-slot .conteudo .info{ flex:1; min-width:0; }
.cq-perfil-slot .conteudo .info .nome{
  font-family:'Lilita One',sans-serif; font-size:14px; color:var(--cq-ink);
}
.cq-perfil-slot .conteudo .info .desc{
  font-family:'Fredoka',sans-serif; font-size:11px; color:#5a4a2a;
}
.cq-perfil-slot.vazio .conteudo{
  justify-content:center; padding:12px 0;
  color:#94A3B8; font-family:'Fredoka',sans-serif; font-size:13px; text-align:center;
}

.cq-perfil-progresso{
  display:flex; align-items:center; gap:10px;
  margin-top:6px; padding-top:8px; border-top:2px dashed rgba(0,0,0,.1);
}
.cq-perfil-progresso .label{
  font-family:'Lilita One',sans-serif; font-size:11px; color:#5a4a2a; letter-spacing:1px;
}
.cq-perfil-progresso .val{
  margin-left:auto; font-family:'Lilita One',sans-serif; font-size:13px; color:var(--cq-orange-d);
}

@media (max-width: 640px){
  .cq-perfil-head{ padding:14px 60px 14px 16px; }
  .cq-perfil-ring{ width:80px; height:80px; }
  .cq-perfil-ring .lvl{ width:28px; height:28px; font-size:12px; }
  .cq-perfil-info h3{ font-size:18px; }
  .cq-perfil-info p{ font-size:11px; }
  .cq-perfil-visao-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   SPRINT 32 - Aba "Avatar" do perfil + ícone editar no anel
   ============================================================ */
.cq-perfil-ring--clicavel{
  cursor:pointer;
  transition:transform .12s, filter .12s;
}
.cq-perfil-ring--clicavel:hover{
  transform:scale(1.06) rotate(-2deg);
  filter:brightness(1.1);
}
.cq-perfil-ring--clicavel:active{ transform:scale(.96); }
.cq-perfil-ring--clicavel:focus{ outline:3px solid #FFE066; outline-offset:4px; }
.cq-perfil-ring-edit{
  position:absolute; top:-6px; left:-6px;
  width:34px; height:34px; border-radius:50%;
  background:#FFE066; border:3px solid var(--cq-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; box-shadow:0 3px 0 var(--cq-ink);
  animation:cq-anel-edit-bounce 2.4s ease-in-out infinite;
}
@keyframes cq-anel-edit-bounce{
  0%,100%{ transform:translateY(0) rotate(-8deg); }
  50%{ transform:translateY(-3px) rotate(8deg); }
}

/* Caixa do avatar equipado (topo da aba) */
.cq-avatar-equipado-box{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg, #FFF7DC, #FFE066);
  border:4px solid var(--cq-ink); border-radius:18px;
  padding:14px; margin-bottom:16px;
  box-shadow:0 5px 0 var(--cq-ink);
}
.cq-avatar-equipado-foto{
  width:78px; height:78px; flex-shrink:0; border-radius:50%;
  background:radial-gradient(circle, #FFE066 0%, #FF9F1C 70%, #E27A0E 100%);
  border:4px solid var(--cq-ink); box-shadow:0 4px 0 var(--cq-ink);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.cq-avatar-equipado-foto img{ width:84%; height:84%; border-radius:50%; object-fit:cover; }
.cq-avatar-equipado-info{ flex:1; min-width:0; }
.cq-avatar-equipado-info .lbl{
  font-family:'Lilita One',sans-serif; font-size:10px; letter-spacing:2px;
  color:#7A4F00; margin:0 0 2px;
}
.cq-avatar-equipado-info .nome{
  font-family:'Lilita One',sans-serif; font-size:20px;
  color:var(--cq-ink); margin:0 0 4px; letter-spacing:.5px;
}
.cq-avatar-equipado-info .dica{
  font-family:'Fredoka',sans-serif; font-size:12px;
  color:#5a4a2a; margin:0;
}

.cq-avatar-titulo-secao{
  font-family:'Lilita One',sans-serif; font-size:13px; letter-spacing:2px;
  color:var(--cq-orange-d); margin:0 0 10px;
}
/* Título que vem logo depois de uma grade: espaço para a sombra dos cartões não cobrir o texto */
.cq-avatar-grid + .cq-avatar-titulo-secao{ margin-top:24px; }

/* Grid 6 colunas no desktop, 4 no tablet, 3 no mobile pequeno */
.cq-avatar-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:10px;
}
@media (max-width:720px){ .cq-avatar-grid{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width:420px){ .cq-avatar-grid{ grid-template-columns:repeat(3, 1fr); } }

.cq-avatar-card{
  position:relative;
  background:#fff; border:4px solid var(--cq-ink); border-radius:16px;
  padding:8px 6px 6px; cursor:pointer;
  box-shadow:0 5px 0 var(--cq-ink);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:transform .12s, box-shadow .12s;
  font-family:'Fredoka',sans-serif;
}
.cq-avatar-card:hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--cq-ink); }
.cq-avatar-card:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--cq-ink); }
.cq-avatar-card img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:12px; background:#FFF7DC;
  border:2px solid var(--cq-ink);
}
.cq-avatar-card .cq-avatar-nome{
  font-family:'Lilita One',sans-serif; font-size:10px; letter-spacing:.5px;
  color:var(--cq-ink); text-align:center;
}
.cq-avatar-card.equipado{
  background:linear-gradient(180deg, #FFF6BE, #FFD24A);
  border-color:#C58A00;
  box-shadow:0 5px 0 #C58A00, 0 0 24px rgba(255,210,74,.6);
  animation:cq-avatar-equipado-pulse 2s ease-in-out infinite;
}
@keyframes cq-avatar-equipado-pulse{
  0%,100%{ box-shadow:0 5px 0 #C58A00, 0 0 24px rgba(255,210,74,.6); }
  50%{ box-shadow:0 5px 0 #C58A00, 0 0 40px rgba(255,210,74,.9); }
}
.cq-avatar-card .cq-avatar-check{
  position:absolute; top:-8px; right:-8px;
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(180deg, #5DD865, #2BAE3A); color:#fff;
  border:3px solid var(--cq-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Lilita One',sans-serif; font-size:12px;
  box-shadow:0 3px 0 var(--cq-green-d);
  animation:cq-pop-in .35s cubic-bezier(.34,1.56,.64,1);
}

.cq-avatar-rodape{
  margin-top:14px; padding:10px 14px;
  background:#FFF7DC; border:2px dashed var(--cq-ink); border-radius:12px;
  display:flex; align-items:center; gap:8px;
  font-family:'Fredoka',sans-serif; font-size:12px; color:#5a4a2a;
}
.cq-avatar-rodape span:first-child{ font-size:18px; }
.cq-avatar-rodape b{ color:var(--cq-orange-d); font-family:'Lilita One',sans-serif; }

/* ============================================================
   SPRINT 27 - MODAL DESAFIO CIVICO CARTOON
   ============================================================ */
.cq-desafio-head{
  background:linear-gradient(135deg, #FF7AD2 0%, #7C4DFF 100%);
  border-bottom:5px solid var(--cq-ink);
  padding:18px 70px 18px 24px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  color:#fff;
}
.cq-desafio-emoji{
  width:60px; height:60px; flex-shrink:0;
  background:#fff; border:4px solid var(--cq-ink); border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; box-shadow:0 4px 0 var(--cq-ink);
}
.cq-desafio-tag{
  font-family:'Lilita One',sans-serif; font-size:11px;
  letter-spacing:2px; opacity:.9; margin:0 0 2px;
}
.cq-desafio-head h3{
  font-family:'Lilita One',sans-serif; font-size:32px; margin:0;
  text-shadow:0 2px 0 rgba(0,0,0,.3); letter-spacing:1px;
}
.cq-desafio-resultado{
  margin-top:16px; padding:18px 20px;
  border:4px solid var(--cq-ink); border-radius:18px;
  box-shadow:0 6px 0 var(--cq-ink); text-align:center;
}
.cq-desafio-resultado.acerto{ background:linear-gradient(180deg, #D4F5C8, #FFFFFF); }
.cq-desafio-resultado.erro{ background:linear-gradient(180deg, #FFD6DA, #FFFFFF); }

@media (max-width: 640px){
  .cq-desafio-head{ padding:14px 60px 14px 18px; }
  .cq-desafio-emoji{ width:48px; height:48px; font-size:26px; }
  .cq-desafio-head h3{ font-size:24px; }
}

/* ============================================================
   SPRINT 28 - MODAIS RESTANTES (Ranking, Quests, Calendario,
   Streak, Power-ups, Jogo) - CARTOON
   ============================================================ */

/* Cabecalho generico cartoon para modais */
.cq-modal-head{
  border-bottom:5px solid var(--cq-ink);
  padding:18px 70px 18px 24px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  color:#fff;
}
.cq-modal-head h3{
  font-family:'Lilita One',sans-serif; font-size:24px; margin:0;
  color:#fff; letter-spacing:1px; text-shadow:0 2px 0 rgba(0,0,0,.3);
}
.cq-modal-head-emoji{
  width:60px; height:60px; flex-shrink:0;
  background:#fff; border:4px solid var(--cq-ink); border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; box-shadow:0 4px 0 var(--cq-ink);
}
.cq-modal-head-tag{
  font-family:'Lilita One',sans-serif; font-size:11px;
  letter-spacing:2px; opacity:.95; margin:0 0 2px;
  color:#fff;
}
.cq-modal-head-sub{
  font-family:'Fredoka',sans-serif; font-size:13px;
  margin:4px 0 0; opacity:.92; color:#fff;
}
@media (max-width: 640px){
  .cq-modal-head{ padding:14px 60px 14px 18px; }
  .cq-modal-head h3{ font-size:20px; }
  .cq-modal-head-emoji{ width:48px; height:48px; font-size:26px; }
}

/* Rodape generico cartoon */
.cq-modal-rodape{
  border-top:3px dashed rgba(0,0,0,.18);
  padding:14px 22px; background:#FFF7DC;
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  border-bottom-left-radius:24px; border-bottom-right-radius:24px;
}
.cq-modal-rodape .dica{
  font-family:'Fredoka',sans-serif; font-size:12px; color:#5a4a2a;
}

/* ===== RANKING ===== */
.cq-ranking-lista{
  display:flex; flex-direction:column; gap:10px;
  padding:4px 0 8px;
}
.cq-rank-row{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:4px solid var(--cq-ink); border-radius:16px;
  padding:10px 14px; box-shadow:0 4px 0 var(--cq-ink);
  transition:transform .08s, box-shadow .08s;
}
.cq-rank-row:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--cq-ink); }
.cq-rank-row.cq-rank-gold{
  background:linear-gradient(180deg, #FFF6BE, #FFD24A);
  box-shadow:0 5px 0 #C58A00;
}
.cq-rank-row.cq-rank-silver{
  background:linear-gradient(180deg, #F3F4F6, #CBD5E1);
  box-shadow:0 5px 0 #64748B;
}
.cq-rank-row.cq-rank-bronze{
  background:linear-gradient(180deg, #FFDDB0, #E08A3B);
  box-shadow:0 5px 0 #8B4513;
}
.cq-rank-pos{
  width:46px; height:46px; flex-shrink:0; border-radius:50%;
  background:#FFE066; border:3px solid var(--cq-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Lilita One',sans-serif; font-size:18px; color:var(--cq-ink);
  box-shadow:0 3px 0 var(--cq-ink);
}
.cq-rank-gold .cq-rank-pos{ background:#FFD24A; }
.cq-rank-silver .cq-rank-pos{ background:#E2E8F0; }
.cq-rank-bronze .cq-rank-pos{ background:#E08A3B; color:#fff; }
.cq-rank-avatar{
  width:44px; height:44px; flex-shrink:0; border-radius:50%;
  background:#fff; border:3px solid var(--cq-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow:0 3px 0 var(--cq-ink); overflow:hidden;
}
.cq-rank-avatar img{ width:100%; height:100%; object-fit:cover; }
.cq-rank-nome{
  flex:1; min-width:0; font-family:'Lilita One',sans-serif;
  font-size:15px; color:var(--cq-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cq-rank-xp{
  font-family:'Lilita One',sans-serif; font-size:14px;
  color:var(--cq-orange-d);
  background:#FFF7DC; border:2px solid var(--cq-ink);
  padding:4px 10px; border-radius:999px;
  box-shadow:0 2px 0 var(--cq-ink);
}
.cq-rank-gold .cq-rank-xp{ background:#fff; }
@media (max-width: 640px){
  .cq-rank-row{ padding:8px 10px; gap:8px; }
  .cq-rank-pos{ width:36px; height:36px; font-size:15px; }
  .cq-rank-avatar{ width:36px; height:36px; font-size:18px; }
  .cq-rank-nome{ font-size:13px; }
  .cq-rank-xp{ font-size:12px; padding:3px 8px; }
}

/* ===== QUESTS ===== */
.cq-quests-lista{
  display:flex; flex-direction:column; gap:10px;
  padding:4px 0 8px;
}
.cq-quest-card{
  background:#fff; border:4px solid var(--cq-ink); border-radius:16px;
  padding:12px 14px; box-shadow:0 5px 0 var(--cq-ink);
  display:flex; align-items:center; gap:12px;
}
.cq-quest-card.completa{
  background:linear-gradient(180deg, #D4F5C8, #B6EAA1);
  box-shadow:0 5px 0 var(--cq-green-d);
}
.cq-quest-emoji{
  width:48px; height:48px; flex-shrink:0;
  background:#FFE066; border:3px solid var(--cq-ink); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; box-shadow:0 3px 0 var(--cq-ink);
}
.cq-quest-info{ flex:1; min-width:0; }
.cq-quest-info .titulo{
  font-family:'Lilita One',sans-serif; font-size:14px; color:var(--cq-ink);
  margin:0 0 2px;
}
.cq-quest-info .desc{
  font-family:'Fredoka',sans-serif; font-size:11px; color:#5a4a2a;
  margin:0 0 6px;
}
.cq-quest-barra{
  width:100%; height:10px; background:#E2E8F0; border:2px solid var(--cq-ink);
  border-radius:999px; overflow:hidden;
}
.cq-quest-barra-fill{
  height:100%; background:linear-gradient(90deg, #5DD865, #2BAE3A);
  transition:width .3s ease;
}
.cq-quest-recompensa{
  font-family:'Lilita One',sans-serif; font-size:12px;
  color:var(--cq-orange-d); flex-shrink:0;
  background:#FFF7DC; border:2px solid var(--cq-ink);
  padding:4px 8px; border-radius:999px;
  box-shadow:0 2px 0 var(--cq-ink);
}

/* ===== STREAK ===== */
.cq-streak-melhor{
  background:linear-gradient(180deg, #FFE066, #FF9F1C);
  border:4px solid var(--cq-ink); border-radius:18px;
  padding:14px 18px; margin-bottom:12px;
  box-shadow:0 5px 0 var(--cq-ink);
  text-align:center;
}
.cq-streak-melhor .label{
  font-family:'Lilita One',sans-serif; font-size:11px;
  letter-spacing:2px; color:#7A4F00; margin:0 0 4px;
}
.cq-streak-melhor .valor{
  font-family:'Lilita One',sans-serif; font-size:36px;
  color:var(--cq-ink); margin:0;
  text-shadow:0 3px 0 rgba(255,255,255,.5);
}
.cq-streak-recuperar{
  background:linear-gradient(180deg, #BFDBFE, #93C5FD);
  border:4px solid var(--cq-ink); border-radius:16px;
  padding:12px 16px; margin-top:12px;
  box-shadow:0 5px 0 var(--cq-ink);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.cq-streak-recuperar .texto{
  font-family:'Fredoka',sans-serif; font-size:13px; color:#1E3A8A;
  flex:1; min-width:160px;
}
.cq-streak-recuperar .texto b{ color:#1E40AF; }
.cq-streak-dica{
  margin-top:12px; padding:10px 14px;
  background:#FFF7DC; border:3px dashed var(--cq-ink); border-radius:14px;
  font-family:'Fredoka',sans-serif; font-size:12px; color:#5a4a2a;
  text-align:center;
}
.cq-streak-dica b{ color:var(--cq-orange-d); }

/* ===== POWER-UPS ===== */
.cq-powerups-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}
.cq-powerup-card{
  background:#fff; border:4px solid var(--cq-ink); border-radius:18px;
  padding:14px 12px; text-align:center; position:relative;
  box-shadow:0 5px 0 var(--cq-ink);
  display:flex; flex-direction:column; gap:8px;
  transition:transform .12s, box-shadow .12s;
}
.cq-powerup-card:hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--cq-ink); }
.cq-powerup-card.usado{ opacity:.55; }
.cq-powerup-emoji{
  width:64px; height:64px; margin:0 auto;
  background:linear-gradient(135deg, #FFF6BE, #FF9F1C);
  border:3px solid var(--cq-ink); border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; box-shadow:0 4px 0 var(--cq-ink);
}
.cq-powerup-info{ flex:1; }
.cq-powerup-nome{
  font-family:'Lilita One',sans-serif; font-size:14px;
  color:var(--cq-ink); margin:0 0 3px; letter-spacing:.5px;
}
.cq-powerup-desc{
  font-family:'Fredoka',sans-serif; font-size:11px;
  color:#5a4a2a; line-height:1.3; margin:0;
}
.cq-powerup-qtd{
  position:absolute; top:8px; right:8px;
  background:#FFE066; color:var(--cq-ink);
  border:2px solid var(--cq-ink); border-radius:999px;
  padding:3px 10px; box-shadow:0 2px 0 var(--cq-ink);
  font-family:'Lilita One',sans-serif; font-size:11px;
}
.cq-powerup-btn{
  background:linear-gradient(180deg, #5DD865, #2BAE3A); color:#fff;
  border:3px solid var(--cq-ink); border-radius:12px;
  padding:6px 10px; box-shadow:0 3px 0 var(--cq-green-d);
  font-family:'Lilita One',sans-serif; font-size:12px;
  text-transform:uppercase; cursor:pointer;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
  transition:transform .08s;
}
.cq-powerup-btn:hover{ transform:translateY(-2px); }
.cq-powerup-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--cq-green-d); }
.cq-powerup-btn:disabled{
  background:linear-gradient(180deg, #94A3B8, #64748B);
  cursor:not-allowed; box-shadow:0 3px 0 #334155;
}
@media (max-width: 640px){
  .cq-powerups-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; }
  .cq-powerup-emoji{ width:52px; height:52px; font-size:28px; }
}

/* ===== ESTADO VAZIO GENERICO ===== */
.cq-vazio-state{
  text-align:center; padding:24px 18px;
  font-family:'Fredoka',sans-serif; color:#5a4a2a;
}
.cq-vazio-state .emoji{
  font-size:48px; line-height:1; margin-bottom:6px;
  animation:cq-bounce 2s ease-in-out infinite;
}
.cq-vazio-state .titulo{
  font-family:'Lilita One',sans-serif; font-size:18px;
  color:var(--cq-ink); margin:8px 0 4px;
}

/* ============================================================
   SPRINT 43.1 - Menu dropdown unico + chat sem scrollbar
   ============================================================ */
.cq-menu-wrap{ position:relative; display:flex; justify-content:flex-end; }
.cq-menu-trigger{
  font-family:'Lilita One',system-ui; font-size:14px; letter-spacing:.5px;
  color:#fff; background:linear-gradient(180deg,#2A588E,#1b3f6b);
  border:4px solid var(--cq-ink); border-radius:16px; padding:12px 20px;
  box-shadow:0 5px 0 var(--cq-ink); cursor:pointer; display:flex; align-items:center; gap:8px;
  white-space:nowrap; transition:transform .1s;
}
.cq-menu-trigger:active{ transform:translateY(2px); box-shadow:0 3px 0 var(--cq-ink); }
.cq-menu-drop{
  position:absolute; top:100%; right:0; z-index:1000;
  display:none !important; flex-direction:column; gap:8px;
  background:#fff; border:4px solid var(--cq-ink); border-radius:18px;
  padding:14px 12px 12px; margin-top:4px; box-shadow:0 8px 0 var(--cq-ink); min-width:210px;
}
/* backdrop transparente: impede hover nos banners e fecha ao clicar fora */
.cq-menu-backdrop{ position:fixed; inset:0; z-index:700; display:none; background:transparent; }
.cq-menu-backdrop.show{ display:block; }
.cq-menu-wrap.open .cq-menu-drop{ display:flex !important; }
.cq-menu-drop .cq-btn{ width:100%; justify-content:flex-start; gap:8px; font-size:14px; padding:11px 14px; border-radius:14px; }
/* Mobile: dropdown ocupa a largura util */
@media (max-width:640px){
  .cq-menu-wrap{ justify-content:stretch; }
  .cq-menu-trigger{ width:100%; justify-content:center; }
  .cq-menu-drop{ left:0; right:0; min-width:0; }
}

/* Chat: frases quebram em linhas, SEM barra de rolagem */
#cq-chat-frases.cq-chat-frases{ flex-wrap:wrap; overflow:visible; padding-bottom:2px; }

/* SPRINT 43.2 - Menu dropdown SEMPRE acima dos banners/cards */
#hud-aluno-topo.cq-game-topbar, .cq-game-topbar{ position:relative; z-index:800; }
.cq-menu-wrap{ position:relative; z-index:900; }
.cq-menu-drop{ z-index:1000 !important; }
/* garante que o restante do jogo fique abaixo do menu aberto */
#wrapper-jogo .cq-game-grid, #wrapper-jogo .cq-game-banners{ position:relative; z-index:1; }

/* SPRINT 43.3 - Enquanto o menu esta aberto, banners nao "pulam" no hover */
body.cq-menu-aberto .cq-banner:hover{ transform:none !important; }

/* SPRINT 44 - correcoes */
#btn-sair-aluno{ z-index:1200 !important; }

/* SPRINT 44 - barra de andamento das quests na sidebar */
.cq-quest-prog{ height:7px; background:#E7E1CF; border:2px solid var(--cq-ink); border-radius:6px; overflow:hidden; margin-top:5px; }
.cq-quest-prog-in{ height:100%; background:linear-gradient(90deg,#0FB286,#5DD865); transition:width .3s; }
.cq-quest.done .cq-quest-prog-in{ background:linear-gradient(90deg,#0FB286,#0a8f6a); }
.cq-quest-prog-txt{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:10px; color:#5a4a2a; }

/* SPRINT 44 - poder do pet na lojinha */
.cq-pet-poder{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:11px; color:#7A4F00; background:#FFF3D6; border:2px solid #E0A800; border-radius:10px; padding:3px 8px; margin:2px 0 6px; display:inline-block; }

/* ===== SPRINT 57 - areas do conhecimento (Ensino Medio) ===== */
/* Reaproveita a paleta das ilhas do Fundamental para manter a identidade */
.cq-ilha--lin{ background:linear-gradient(180deg,#FFB3D1,#E24B8A); }
.cq-ilha--nat{ background:linear-gradient(180deg,#8FE3C8,#0FB286); }
.cq-ilha--hum{ background:linear-gradient(180deg,#FFD79A,#E0A800); }
.cq-ilha--civ{ background:linear-gradient(180deg,#FFC2A3,#D85A30); }