/* ═══════════════════════════════════════════
   GAME.CSS
   Ecrã do jogo (#screen-game):
   barra de topo, área principal, anel de progresso,
   waveform animada, indicador de escuta e
   botões de resposta (Humano / IA).
   Inclui também o overlay de flash de feedback.
═══════════════════════════════════════════ */

#screen-game { flex-direction: column; }

/* ── Barra de topo (sessão + progresso) ────── */
.game-bar {
  background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  flex-shrink: 0;
}
.game-bar .gb-id { color: var(--muted); }
.bar-track { flex: 1; max-width: 260px; height: 4px; border-radius: 4px; background: var(--bg); margin: 0 18px; overflow: hidden; }
.bar-fill  { height: 100%; background: var(--accent); transition: width .5s ease; width: 0%; border-radius: 4px; }

/* ── Área central do jogo ───────────────────── */
.game-main {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 20px; gap: 44px;
}

/* ── Anel de progresso SVG ──────────────────── */
.ring-wrap     { position: relative; width: 176px; height: 176px; flex-shrink: 0; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 12px rgba(129,140,248,0.1)); }
.r-track { fill: none; stroke: var(--panel); stroke-width: 4; }
.r-prog  {
  fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 490; stroke-dashoffset: 490;
  transition: stroke-dashoffset .6s ease;
}
.ring-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
}
.ring-num { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; line-height: 1; color: var(--text); }
.ring-sub { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }

/* ── Waveform animada ───────────────────────── */
.waveform {
  display: flex; align-items: center; gap: 4px;
  height: 52px; width: 100%; max-width: 320px; justify-content: center;
}
.w-bar {
  width: 4px; background: var(--text); border-radius: 3px;
  height: 4px; transition: height .08s ease; opacity: .15;
}
.waveform.playing .w-bar { opacity: 1; background: var(--accent); box-shadow: 0 0 8px rgba(129,140,248,.6); }

/* ── Indicador "A ouvir…" ───────────────────── */
.ls       { display: flex; align-items: center; gap: 9px; font-size: 12px;
            letter-spacing: 2px; text-transform: uppercase; color: var(--muted); min-height: 20px; }
.ls .ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.ls.active .ldot { background: var(--warning); animation: blink 1s infinite; box-shadow: 0 0 6px var(--warning); }
.ls.active       { color: var(--text); }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Botões de resposta Humano / IA ─────────── */
.answer-zone { display: flex; gap: 16px; width: 100%; max-width: 480px; }
.ans-btn {
  flex: 1; padding: 36px 16px; border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius);
  cursor: pointer; font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem; letter-spacing: 3px; color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: all .2s; position: relative; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.ans-btn .ans-sub  { font-family: 'IBM Plex Mono', monospace;
                     font-size: 11px; letter-spacing: 1px; font-weight: 500; text-transform: uppercase; color: var(--muted); }
.ans-btn::after    { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.ans-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.ans-btn:hover::after { opacity: 1; }
.ans-btn:active    { transform: translateY(1px); }
.ans-btn.disabled  { opacity: .3; pointer-events: none; filter: grayscale(1); }

/* Botão Humano */
.ans-btn.hbtn        { border-top: 3px solid var(--human); }
.ans-btn.hbtn::after { background: radial-gradient(circle at center, rgba(74,222,128,.15) 0%, transparent 70%); }
.ans-btn.hbtn:hover  { border-color: rgba(74,222,128,.3); }

/* Botão IA */
.ans-btn.abtn        { border-top: 3px solid var(--ai); }
.ans-btn.abtn::after { background: radial-gradient(circle at center, rgba(248,113,113,.15) 0%, transparent 70%); }
.ans-btn.abtn:hover  { border-color: rgba(248,113,113,.3); }

/* ── Flash de feedback ──────────────────────── */
.flash       { position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: 0; transition: opacity .1s ease-out; }
.flash.show  { opacity: 1; }
.flash.human { background: radial-gradient(circle, rgba(74,222,128,.2) 0%, transparent 100%); }
.flash.ai    { background: radial-gradient(circle, rgba(248,113,113,.2) 0%, transparent 100%); }

/* ── Overlay de contagem decrescente ───────── */
.cdown-ov        { position: fixed; inset: 0; z-index: 500; background: rgba(12,14,20,.95); backdrop-filter: blur(5px);
                   display: flex; flex-direction: column;
                   align-items: center; justify-content: center; gap: 10px; }
.cdown-ov.hidden { display: none; }
.cdown-ov .cn    { font-family: 'Bebas Neue', sans-serif; font-size: 16rem; line-height: .85; color: var(--accent); text-shadow: 0 0 40px rgba(129,140,248,.3); }
.cdown-ov .cl    { font-size: 14px; letter-spacing: 5px; text-transform: uppercase;
                   color: var(--muted); }