/* Navegação compartilhada dos três módulos da Digitação Profissional. */

.top-actions{flex-wrap:nowrap;white-space:nowrap}
.course-action{min-width:0;width:auto;height:40px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;font-size:.72rem;font-weight:800;line-height:1;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease}
.course-action:hover{transform:translateY(-2px);filter:brightness(1.06)}
.course-action svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.course-action .label-short{display:none}
.fullscreen-btn.course-action--fullscreen{color:#061321;border-color:rgba(165,243,252,.86);background:linear-gradient(135deg,#8beeff,#42ccef);box-shadow:0 8px 22px rgba(66,204,239,.25)}
.course-action--area{color:var(--text);border-color:rgba(75,141,255,.42);background:rgba(75,141,255,.11);box-shadow:inset 0 1px rgba(255,255,255,.04)}
.course-action--logout{color:#07111f;border:1px solid rgba(255,225,105,.9);background:linear-gradient(135deg,#ffd94f,#f5b800);box-shadow:0 9px 24px rgba(245,184,0,.25)}
.course-action--logout:hover{box-shadow:0 12px 29px rgba(245,184,0,.36)}
.course-action--logout:focus-visible,.course-action--area:focus-visible,.course-action--fullscreen:focus-visible,.focus-btn--prominent:focus-visible{outline:3px solid #fff;outline-offset:3px}
.course-action--logout:disabled{opacity:.7;cursor:wait;transform:none}
.focus-btn.focus-btn--prominent{width:auto;min-width:112px;color:#07111f;border:2px solid #d97706;background:linear-gradient(135deg,#fef08a,#f59e0b);box-shadow:0 4px 14px rgba(245,158,11,.35);font-weight:900;animation:pulseGoldAdult 2.4s ease-in-out infinite}
.focus-btn.focus-btn--prominent span{display:inline}

@keyframes pulseGoldAdult {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(245,158,11,.32); }
  50% { transform: scale(1.03); box-shadow: 0 6px 20px rgba(245,158,11,.52); }
}

/* Quando ESTIVER em tela cheia no Adulto: Sair da tela cheia em vermelho/coral não-azul */
.focus-btn.is-active-fullscreen,
.fullscreen-btn.is-active-fullscreen,
#lessonStage:fullscreen .focus-btn,
#lessonStage:fullscreen .focus-btn.focus-btn--prominent {
  background: rgba(239,68,68,.16) !important;
  border: 2px solid #ef4444 !important;
  color: #ff6b78 !important;
  box-shadow: 0 0 14px rgba(239,68,68,.3) !important;
}
.focus-btn.is-active-fullscreen:hover,
#lessonStage:fullscreen .focus-btn:hover {
  background: rgba(239,68,68,.26) !important;
}

@media(max-width:1180px){.course-action{padding-inline:10px}.course-action .label-long{display:none}.course-action .label-short{display:inline}}
@media(max-width:820px){.course-action,.exit-btn.course-action{width:auto;height:37px;padding-inline:9px}.course-action .label-short{display:inline}}
@media(max-width:600px){.topbar{padding-inline:10px}.top-actions{gap:5px}.top-actions .sound-btn,.top-actions .theme-btn{display:none}.course-action,.exit-btn.course-action{padding-inline:8px}.fullscreen-btn.course-action--fullscreen{min-width:91px}.stage-top{flex-direction:column}.stage-start{width:100%}.focus-btn.focus-btn--prominent{min-width:108px}}
@media(max-width:410px){.brand-logo{width:38px;height:38px}.course-action,.exit-btn.course-action{padding-inline:7px;font-size:.67rem}.fullscreen-btn.course-action--fullscreen{min-width:86px}}

/* ==========================================================================
   Régua lateral no modo tela cheia para o curso Profissional (Zero sobreposição)
   ========================================================================== */
.profissional-fullscreen-rail {
  display: none;
}

#lessonStage:fullscreen .profissional-fullscreen-rail,
#lessonStage.is-fullscreen .profissional-fullscreen-rail {
  display: flex !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 58px;
  background: var(--surface-2, #0c1d33);
  border-right: 1px solid var(--line, rgba(159,190,231,.14));
  padding: 10px 4px;
  flex-direction: column;
  align-items: center;
  z-index: 90;
  box-shadow: 4px 0 24px rgba(0,0,0,.45);
  overflow-y: auto;
  scrollbar-width: none;
}
.profissional-fullscreen-rail::-webkit-scrollbar { display: none; }

#lessonStage:fullscreen .stage-top,
#lessonStage:fullscreen .stage-body,
#lessonStage:fullscreen .stage-footer {
  padding-left: calc(clamp(16px, 3.5vw, 40px) + 54px) !important;
}

.rail-header {
  margin-bottom: 8px;
  text-align: center;
  flex-shrink: 0;
}
.rail-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold, #f5b800);
}
.rail-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  align-items: center;
  padding: 0;
  margin: 0;
}
.rail-list li {
  width: 100%;
  display: flex;
  justify-content: center;
}
.rail-item {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line, rgba(159,190,231,.15));
  background: var(--surface, #07111f);
  color: var(--muted, #91a6c5);
  display: grid;
  place-items: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s, color .18s;
}
.rail-item:hover:not(.locked) {
  transform: scale(1.08);
  border-color: var(--cyan, #65e7ff);
  color: #fff;
}
.rail-item.current {
  background: var(--gold, #f5b800) !important;
  border-color: var(--gold, #f5b800) !important;
  color: #07111f !important;
  box-shadow: 0 0 16px rgba(245,184,0,.45);
  transform: scale(1.06);
}
.rail-item.done {
  border-color: rgba(66,221,160,.4);
  color: var(--green, #42dda0);
}
.rail-item.locked {
  opacity: .35;
  cursor: not-allowed;
  border-color: transparent;
}

/* ==========================================================================
   Padronização e Alinhamento Justificado das Linhas de Digitação (Estilo Kids)
   ========================================================================== */
.type-line {
  font-family: 'Consolas', 'Fira Code', 'Courier New', monospace !important;
  letter-spacing: .06em !important;
  line-height: 1.85 !important;
  text-align: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: var(--surface-2) !important;
  padding: 16px 20px !important;
}

.type-line .visual-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 5px 0 !important;
  white-space: nowrap !important;
  width: 100% !important;
}

.type-line .row-letters {
  display: inline-flex !important;
  align-items: center !important;
  font-family: inherit !important;
}

/* Largura rigorosamente uniforme para todas as letras para evitar qualquer desalinhamento */
.type-line .row-letters > span,
.type-line .row-letters span.target,
.type-line .row-letters span.typed-ok,
.type-line .row-letters span.typed-error,
.type-line .row-letters span.pending,
.type-line .row-letters .type-char {
  display: inline-block !important;
  width: 1.15ch !important;
  min-width: 1.15ch !important;
  max-width: 1.15ch !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.type-line span.target {
  background: var(--gold, #f5b800) !important;
  color: #07111f !important;
  border-radius: 4px !important;
  box-shadow: 0 0 14px rgba(245,184,0,.5) !important;
}

/* Mini botão / marca visual de espaço (como no Kids) */
.type-line .space-gap-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  font-style: normal !important;
  font-size: 0 !important;
  line-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

.type-line .space-gap-mark::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 4px !important;
  border-bottom: 2px solid currentColor !important;
  border-left: 1.5px solid currentColor !important;
  border-right: 1.5px solid currentColor !important;
  border-top: none !important;
  border-radius: 0 0 2px 2px !important;
  opacity: .45 !important;
  margin-bottom: 3px !important;
  transition: all .15s ease !important;
}

.type-line span.target .space-gap-mark::before {
  opacity: 1 !important;
  border-color: #07111f !important;
  border-width: 2.2px !important;
  border-top: none !important;
  width: 9px !important;
}

.type-line span.typed-ok .space-gap-mark::before {
  opacity: .7 !important;
  border-color: var(--green, #42dda0) !important;
}

.type-line span.typed-error .space-gap-mark::before {
  opacity: .95 !important;
  border-color: var(--red, #ff6b78) !important;
}

/* Botão ENTER individual e estilizado como tecla de teclado (como no Kids) */
.type-line .round-enter,
span.round-enter {
  width: auto !important;
  min-width: 74px !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  border-radius: 8px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  border: 1.5px solid rgba(101,231,255,.32) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
  transition: all .2s cubic-bezier(.2,.8,.2,1) !important;
}

.type-line .round-enter .enter-icon-wrap,
.type-line .round-enter > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: .85rem !important;
}

.type-line .round-enter .enter-icon-wrap svg {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
}

.type-line .round-enter b {
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: .65rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
}

.type-line .round-enter.waiting {
  opacity: .35 !important;
  border-color: rgba(159,190,231,.18) !important;
  background: rgba(8, 20, 36, 0.45) !important;
  color: #617795 !important;
}

.type-line .round-enter.current-line {
  opacity: .9 !important;
  border-color: rgba(101,231,255,.45) !important;
  background: rgba(101,231,255,.1) !important;
  color: #65e7ff !important;
}

.type-line .round-enter.active {
  opacity: 1 !important;
  border-color: #ffd54f !important;
  background: linear-gradient(135deg, #ffd54f 0%, #ffb300 100%) !important;
  color: #07111f !important;
  box-shadow: 0 0 0 3px rgba(255, 179, 0, .25), 0 0 20px rgba(255, 179, 0, .55) !important;
  animation: professionalEnterPulse 1.2s ease-in-out infinite !important;
}

.type-line .round-enter.done {
  opacity: .9 !important;
  border-color: rgba(66,221,160,.4) !important;
  background: rgba(66,221,160,.12) !important;
  color: #42dda0 !important;
}

/* ==========================================================================
   COLUNA LATERAL DE MÉTRICAS E TELEMETRIA (ESTILO KIDS)
   Em vez de barra horizontal que corta na tela cheia, coluna organizada na direita
   ========================================================================== */
.stage.started .exercise-view,
.exercise-view {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 170px !important;
  grid-template-areas:
    "round   sidebar"
    "type    sidebar"
    "feed    sidebar"
    "result  sidebar"
    "desk    sidebar" !important;
  column-gap: 18px !important;
  row-gap: 8px !important;
  align-items: start !important;
  width: 100% !important;
}

.round-panel {
  grid-area: round !important;
  margin-bottom: 6px !important;
}

.type-line {
  grid-area: type !important;
}

.typing-feedback {
  grid-area: feed !important;
  min-height: 22px !important;
  margin: 0 !important;
}

.exercise-result {
  grid-area: result !important;
}

.exercise-view .desk {
  grid-area: desk !important;
  margin-top: 6px !important;
}

.exercise-head {
  grid-area: sidebar !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.exercise-head .live-metrics {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Botão Instant Retry na coluna lateral */
.exercise-head .instant-retry {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 0 6px 0 !important;
}

/* Cartões de métricas individuais (Precisão e Tempo) - estilo Kids */
.exercise-head .live-metric {
  width: 100% !important;
  padding: 10px 8px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--line, rgba(159,190,231,.16)) !important;
  background: var(--surface, #0c1d33) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.15) !important;
  box-sizing: border-box !important;
}

.exercise-head .live-metric b {
  display: block !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.5rem !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}

.exercise-head .live-metric span {
  display: block !important;
  font-size: .56rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--muted, #91a6c5) !important;
  margin-top: 2px !important;
}

.exercise-head .live-metric [data-live="accuracy"] {
  color: var(--green, #42dda0) !important;
}

/* Cartão de Tempo: menor que a precisão como solicitado */
.exercise-head .live-metric:has([data-live="time"]) {
  padding: 6px 8px !important;
  border-radius: 10px !important;
  background: rgba(12, 29, 51, 0.72) !important;
}

.exercise-head .live-metric:has([data-live="time"]) b,
.exercise-head .live-metric [data-live="time"] {
  font-size: 1.15rem !important;
  color: var(--cyan, #65e7ff) !important;
}

.exercise-head .live-metric:has([data-live="time"]) span {
  font-size: .5rem !important;
  margin-top: 1px !important;
  opacity: .85 !important;
}

.exercise-head .live-metric:has([data-live="ppm"]) {
  display: none !important; /* PPM já é exibido no velocímetro abaixo */
}

/* Cartão do Velocímetro integrado na coluna direita */
.exercise-head .speed-gauge {
  width: 100% !important;
  padding: 10px 8px !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--line, rgba(159,190,231,.16)) !important;
  background: var(--surface, #0c1d33) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.15) !important;
  box-sizing: border-box !important;
}

.exercise-head .speed-dial {
  width: 78px !important;
  height: 44px !important;
  margin: 0 auto !important;
}

.exercise-head .speed-dial svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.exercise-head .speed-copy {
  text-align: center !important;
}

.exercise-head .speed-copy > span {
  display: block !important;
  font-size: .56rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--faint, #617795) !important;
}

.exercise-head .speed-copy strong {
  display: block !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.15rem !important;
  color: var(--text, #f8fbff) !important;
  margin: 1px 0 !important;
}

.exercise-head .speed-copy small {
  display: block !important;
  font-size: .62rem !important;
  color: var(--muted, #91a6c5) !important;
}

.exercise-head .speed-copy small b {
  color: var(--gold, #f5b800) !important;
}

/* ==========================================================================
   DESTAQUE MÁXIMO PARA O BOTÃO REPETIR EXERCÍCIO
   ========================================================================== */
.result-actions .retry-btn,
.exercise-result .retry-btn {
  min-height: 48px !important;
  padding: 0 26px !important;
  border-radius: 12px !important;
  border: 1.5px solid #ffd54f !important;
  background: linear-gradient(135deg, #ffd54f 0%, #ffb300 100%) !important;
  color: #07111f !important;
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 8px 24px rgba(255, 179, 0, .35) !important;
  cursor: pointer !important;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, filter .18s !important;
}

.result-actions .retry-btn:hover,
.exercise-result .retry-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(255, 179, 0, .5) !important;
  filter: brightness(1.06) !important;
}

.result-actions .retry-btn:active,
.exercise-result .retry-btn:active {
  transform: translateY(0) scale(0.99) !important;
}

.exercise-result.failed-result .retry-btn {
  font-size: .94rem !important;
  min-height: 52px !important;
  padding: 0 32px !important;
  box-shadow: 0 0 0 4px rgba(255, 179, 0, .28), 0 10px 28px rgba(255, 179, 0, .5) !important;
  animation: retryPulseProminent 1.8s ease-in-out infinite !important;
}

@keyframes retryPulseProminent {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 179, 0, .28), 0 10px 28px rgba(255, 179, 0, .5); }
  50% { box-shadow: 0 0 0 8px rgba(255, 179, 0, .42), 0 14px 36px rgba(255, 179, 0, .65); }
}

/* ==========================================================================
   AJUSTE DE TELA CHEIA PARA EVITAR CORTE VERTICAL
   ========================================================================== */
#lessonStage:fullscreen {
  overflow-y: auto !important;
}

#lessonStage:fullscreen .stage-top,
#lessonStage.is-fullscreen .stage-top {
  padding-left: 84px !important;
  padding-right: 20px !important;
}

#lessonStage:fullscreen .stage-body,
#lessonStage.is-fullscreen .stage-body {
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 20px 14px 84px !important;
  box-sizing: border-box !important;
}

#lessonStage:fullscreen .stage-footer,
#lessonStage.is-fullscreen .stage-footer {
  padding-left: 84px !important;
  padding-right: 20px !important;
}

#lessonStage:fullscreen .exercise-view {
  grid-template-columns: minmax(0, 1fr) 170px !important;
  column-gap: 18px !important;
  row-gap: 6px !important;
}

#lessonStage:fullscreen .desk {
  min-height: 240px !important;
  padding: 12px 14px 6px !important;
  margin-top: 4px !important;
}

/* Responsividade para telas menores */
@media (max-width: 900px) {
  .stage.started .exercise-view,
  .exercise-view {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "sidebar"
      "round"
      "type"
      "feed"
      "result"
      "desk" !important;
    column-gap: 0 !important;
    row-gap: 10px !important;
  }
  .exercise-head .live-metrics {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .type-line {
    font-size: clamp(.82rem, 3.4vw, 1.1rem) !important;
    padding: 14px 8px !important;
  }
  .type-line .visual-row {
    gap: 6px !important;
    margin: 4px 0 !important;
  }
  .type-line .round-enter {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 8px !important;
    font-size: .55rem !important;
    gap: 3px !important;
  }
  .type-line .round-enter .enter-icon-wrap svg {
    width: 10px !important;
    height: 10px !important;
  }
  .type-line .round-enter b {
    font-size: .52rem !important;
  }
}