/* ============================================================
   Forca — tema sunset pastel.
   Vars do engine são sobrescritas no escopo do game-host
   pra que HUD (scores, botões fixos) herdem o tema novo.
   ============================================================ */

.sj-game-host:has(.frc) {
  --sj-text:           #2d2438;
  --sj-text-dim:       #5d5468;
  --sj-text-mute:      rgba(45, 36, 56, 0.42);
  --sj-bg-card:        rgba(255, 255, 255, 0.85);
  --sj-bg-elev:        rgba(255, 255, 255, 0.7);
  --sj-bg-card-hover:  rgba(255, 255, 255, 0.95);
  --sj-score-bg:       #fff;
  --sj-border:         rgba(255, 255, 255, 0.5);
  --sj-border-bright:  rgba(45, 36, 56, 0.18);
  --sj-accent:         #6b5bff;
  --sj-accent-hover:   #5347d6;
  --sj-accent-soft:    rgba(107, 91, 255, 0.12);
  --sj-gold:           #ffd93d;
  --sj-danger:         #ff3355;
}

/* Gradiente sunset vai no host (cobre tanto desktop quanto mobile —
   no mobile o stage-frame fica transparente, e é o host que pinta).
   Especificidade extra (body:has) pra vencer a regra mobile do layout.css
   que força background: var(--sj-bg-card).
   Background multilayer (sem ::before) pra não precisar mexer em position. */
.sj-game-host:has(.frc),
body:has(.sj-game-stage) .sj-game-host:has(.frc) {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
.sj-game-stage-frame:has(.frc) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Layout ============ */
.frc {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; padding: 20px;
  height: 100%; box-sizing: border-box;
  position: relative; z-index: 1;
}
/* Quando o teclado virtual está visível, reserva sua altura pra o robô/palavra
   não ficarem ocluídos. Var setada pela engine via inline style no host. */
.sj-game-host[data-kb="yes"] .frc {
  padding-bottom: calc(20px + var(--sj-kb-h, 160px));
}

.frc-stage-area {
  display: grid; grid-template-columns: auto 1fr;
  gap: 32px; align-items: center;
  max-width: 580px; width: 100%;
}
.frc-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.frc-cat {
  font-family: var(--sj-font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em; color: #2d2438;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 6px 14px; border-radius: 999px;
  align-self: flex-start;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ============ Robô ============ */
.frc-robot {
  --led-on:  #00ff88;
  --led-off: rgba(45, 36, 56, 0.35);
  --metal:   #f4f5f7;
  --shadow:  #c5c7cf;
  --eye:     #2d2438;
  --detail:  #6b5bff;
  width: 220px;
  /* aspect-ratio bate com o viewBox do SVG (200×260) — sem whitespace lateral. */
  aspect-ratio: 200 / 260;
  filter: drop-shadow(0 10px 18px rgba(45, 36, 56, 0.32));
  transition: transform .25s;
}
.frc-robot-floor          { fill: rgba(0, 0, 0, 0.18); }
.frc-robot-antenna        { stroke: var(--detail); stroke-width: 3; stroke-linecap: round; }
.frc-robot-antenna-tip    { fill: var(--led-on); animation: frc-blink 1.8s ease-in-out infinite; }
.frc-robot-head           { fill: var(--metal); stroke: var(--shadow); stroke-width: 1.5; }
.frc-robot-eye            { fill: var(--eye); transition: fill .3s, r .25s; }
.frc-robot-mouth          { stroke: var(--eye); stroke-width: 2.5; stroke-linecap: round; fill: none; transition: stroke .3s; }
.frc-robot-mouth--sad     { display: none; }
.frc-robot-neck           { fill: var(--shadow); }
.frc-robot-body           { fill: var(--metal); stroke: var(--shadow); stroke-width: 1.5; transition: fill .3s; }
.frc-robot-led            { fill: var(--led-on); transition: fill .3s; }
.frc-robot-led.is-off     { fill: var(--led-off); }
.frc-robot-display        { fill: var(--eye); }
.frc-robot-arm,
.frc-robot-leg            { fill: var(--shadow); }

/* Defeated: corpo vira vermelho, olhos viram X (boca triste) */
.frc-robot.is-defeated .frc-robot-body         { fill: var(--sj-danger); }
.frc-robot.is-defeated .frc-robot-eye          { fill: var(--sj-danger); }
.frc-robot.is-defeated .frc-robot-antenna-tip  { fill: var(--sj-danger); animation: none; }
.frc-robot.is-defeated .frc-robot-mouth--happy { display: none; }
.frc-robot.is-defeated .frc-robot-mouth--sad   { display: block; }

/* Victorious: pulinho */
.frc-robot.is-victorious { animation: frc-cheer .55s ease-out 2; }

@keyframes frc-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes frc-cheer { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ============ Palavra ============ */
.frc-word {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-family: var(--sj-font-display); font-weight: 900;
  font-size: 36px; letter-spacing: 0.04em;
}
.frc-slot {
  /* Largura fixa pra alinhar a base de todas as letras independentemente
     da largura intrínseca (I vs W). Altura ligeiramente maior pra dar ar. */
  width: 38px; height: 46px;
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  /* line-height 1 colapsa o line-box da fonte; padding-top corrige o
     desbalanceamento ascent/descent da Big Shoulders Display (cap-height
     baixa = letras ficam altas no box geométrico). Sem isso, mesmo com
     place-items: center a letra fica visivelmente acima do centro. */
  line-height: 1;
  padding-top: 3px;
  box-sizing: border-box;
  color: #2d2438;
  box-shadow: 0 2px 8px rgba(45, 36, 56, 0.1);
  transition: background .25s, color .25s, border-color .25s;
  flex-shrink: 0;
}
.frc-slot.is-space  { background: transparent; border: 0; width: 14px; box-shadow: none; }
/* Hífen fixo — sem borda/fundo, "-" sempre visível, largura reduzida. */
.frc-slot.is-hyphen {
  background: transparent; border: 0; box-shadow: none;
  width: 18px; padding-top: 0;
  color: rgba(45, 36, 56, 0.55);
  font-weight: 900;
}
.frc-slot.is-reveal {
  background: #6b5bff;
  border-color: #6b5bff;
  color: #fff;
  animation: frc-slot-pop .3s ease-out;
}
/* Letras que faltaram quando o jogador desistiu — em vermelho. */
.frc-slot.is-missed {
  background: var(--sj-danger);
  border-color: var(--sj-danger);
  color: #fff;
  animation: frc-slot-pop .3s ease-out;
}
@keyframes frc-slot-pop {
  0%   { transform: scale(0.55); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
/* Flash da palavra na vitória — 3 piscadas rápidas antes do overlay. */
.frc-word.is-flashing .frc-slot.is-reveal {
  animation: frc-word-flash .26s ease-in-out 3;
}
@keyframes frc-word-flash {
  0%, 100% { background: #6b5bff; color: #fff; box-shadow: 0 2px 8px rgba(107,91,255,0.4); }
  50%      { background: #ffd93d; color: #2d2438; box-shadow: 0 0 16px rgba(255,217,61,0.7); }
}

/* Teclado: usa SJ.keyboard (engine). Estados visuais hit/miss/disabled
   estão no sj.css. */

/* ============ Tour highlight ============ */
.frc-tour-target {
  position: relative;
  z-index: 1500;
}
.frc-tour-target::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 3px solid #ffd93d;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(45, 36, 56, 0.55);
  pointer-events: none;
  animation: frc-tour-pulse 1.5s ease-in-out infinite;
}
@keyframes frc-tour-pulse {
  0%,100% { box-shadow: 0 0 0 9999px rgba(45, 36, 56, 0.55), 0 0 0 0 rgba(255, 217, 61, 0.5); }
  50%     { box-shadow: 0 0 0 9999px rgba(45, 36, 56, 0.55), 0 0 0 12px rgba(255, 217, 61, 0); }
}

/* ============ Responsivo ============ */
@media (max-width: 600px) {
  .frc { gap: 16px; padding: 12px; }
  .frc-stage-area { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .frc-robot { width: 150px; }
  .frc-info  { align-items: center; gap: 10px; }
  .frc-word  { font-size: 26px; justify-content: center; }
  .frc-slot  { width: 28px; height: 38px; padding-top: 2px; }
  .frc-slot.is-space  { width: 10px; padding-top: 0; }
  .frc-slot.is-hyphen { width: 14px; }
}

/* Mobile com altura sobrando (celulares modernos em retrato): robô maior. */
@media (max-width: 600px) and (min-height: 700px) {
  .frc-robot { width: 188px; }
}

/* Viewport landscape baixo (Nest Hub 1024×600, netbooks): mantém o robô
   ao lado da palavra (layout padrão) — assim os slots não quebram no meio
   de palavra longa — e troca o teclado pra 14 colunas × 2 linhas, ganhando
   altura. Robô encolhido pra não comprimir a área disponível. */
@media (min-width: 901px) and (max-height: 760px) {
  .frc { gap: 14px; padding: 10px; }
  .frc-robot { width: 150px; }
  .frc-stage-area { gap: 24px; }
}