/* =====================================================================
   games-embed.css — v3.2.1
   Aba Games: launchers dos 4 jogos embutidos (iframe), overlay de tela
   cheia e o painel do professor para liberar níveis CEFR por aluno.
   ===================================================================== */

/* ---------- painel do professor: liberar níveis ---------- */
.game-levelctl{
  background:linear-gradient(150deg,rgba(124,92,255,.14),rgba(15,186,184,.10));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:14px 14px 12px;
  margin-bottom:16px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.game-levelctl__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:11px; flex-wrap:wrap;
}
.game-levelctl .glc-title{ font-size:14.5px; font-weight:800; color:#fff; letter-spacing:.2px; }
.game-levelctl .glc-sub{ font-size:12px; color:rgba(255,255,255,.62); }
.game-levelctl .glc-sub b{ color:#5be7e2; }
.gl-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.gl-chip{
  flex:1 1 auto; min-width:42px;
  appearance:none; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.66);
  font-size:13px; font-weight:800; letter-spacing:.4px;
  padding:9px 4px; border-radius:11px; cursor:pointer;
  transition:transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.gl-chip:hover{ transform:translateY(-1px); }
.gl-chip:active{ transform:scale(.96); }
/* níveis liberados (<= teto) ficam preenchidos */
.gl-chip.on{
  background:linear-gradient(135deg,#0fbab8,#0a8f8d);
  border-color:rgba(91,231,226,.5); color:#04201f;
}
/* o teto escolhido recebe um anel de destaque */
.gl-chip.sel{
  box-shadow:0 0 0 2px rgba(91,231,226,.9), 0 6px 18px rgba(15,186,184,.35);
  color:#fff; background:linear-gradient(135deg,#16d6d2,#0c9b98);
}
.game-levelctl__hint{
  margin-top:10px; font-size:11.5px; line-height:1.45;
  color:rgba(255,255,255,.55);
}
.game-levelctl__hint b{ color:rgba(255,255,255,.82); }

/* ---------- badge do aluno (somente leitura) ---------- */
.game-levelbadge{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:11px 14px; margin-bottom:16px;
  font-size:12.5px; color:rgba(255,255,255,.7);
}
.game-levelbadge b{ color:#5be7e2; font-weight:800; }

/* ---------- grid de launchers ---------- */
.glaunch-grid{ display:flex; flex-direction:column; gap:11px; }
.glaunch{
  position:relative; width:100%;
  display:flex; align-items:center; gap:13px; text-align:left;
  appearance:none; cursor:pointer;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:13px 14px;
  color:#fff;
  transition:transform .14s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.glaunch::before{
  content:""; position:absolute; inset:0;
  background:var(--gg,linear-gradient(135deg,#0fbab8,#7c5cff));
  opacity:.10; transition:opacity .2s ease; pointer-events:none;
}
.glaunch:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.2); box-shadow:0 12px 30px rgba(0,0,0,.32); }
.glaunch:hover::before{ opacity:.18; }
.glaunch:active{ transform:scale(.985); }
.glaunch__ico{
  position:relative; flex:0 0 auto;
  width:58px; height:58px; border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  box-shadow:0 6px 18px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.14);
}
.glaunch__logo{ width:100%; height:100%; object-fit:cover; display:block; }
.glaunch__txt{ position:relative; flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.glaunch__kick{
  font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.glaunch__name{ font-size:16px; font-weight:800; color:#fff; }
.glaunch__desc{
  font-size:12px; color:rgba(255,255,255,.62); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.glaunch__play{
  position:relative; flex:0 0 auto;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  color:#fff;
}
.glaunch__play svg{ width:18px; height:18px; }

/* aviso de questionários vazios */
.games-quiz-empty{
  font-size:12.5px; color:rgba(255,255,255,.5);
  padding:14px; border:1px dashed rgba(255,255,255,.14); border-radius:14px;
}

/* ---------- overlay de tela cheia com o jogo (iframe) ---------- */
html.game-overlay-open, body.game-overlay-open{ overflow:hidden; }
.game-overlay{
  position:fixed; inset:0; z-index:2147482000;
  display:flex; flex-direction:column;
  background:#0b0a1a;
  opacity:0; transform:translateY(8px);
  transition:opacity .26s ease, transform .26s ease;
}
.game-overlay.show{ opacity:1; transform:none; }
.game-overlay__bar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  height:calc(52px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 12px 0;
  background:rgba(13,12,30,.94);
  border-bottom:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.game-overlay__close{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:3px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:13.5px; font-weight:700;
  padding:7px 12px 7px 8px; border-radius:11px;
}
.game-overlay__close svg{ width:18px; height:18px; }
.game-overlay__close:active{ transform:scale(.95); }
.game-overlay__title{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:800; color:#fff; }
.game-overlay__logo{ width:24px; height:24px; border-radius:7px; object-fit:cover; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.game-overlay__lvl{
  flex:0 0 auto; font-size:10.5px; font-weight:700;
  color:#04201f; background:#5be7e2; border-radius:999px; padding:5px 9px;
  white-space:nowrap;
}
.game-overlay__frame{
  flex:1 1 auto; width:100%; height:100%;
  border:0; background:#0b0a1a; display:block;
}