/* ======================================================
   style.css
   Folha de estilos principal do jogo "Mesa de Revisão — Al Jazeera".

   Este CSS controla:
   - aparência geral em estilo 8-bit / pixel art;
   - fundo de desktop;
   - ícones laterais;
   - janela principal do jogo;
   - corpus em árabe;
   - caixas de resposta e parecer editorial;
   - marketplace de modos;
   - painel de configurações;
   - tooltips de vocabulário;
   - barra inferior estilo sistema operacional.
====================================================== */


/* ======================================================
   1. VARIÁVEIS GERAIS DO TEMA
====================================================== */

/*
  :root guarda variáveis CSS globais.

  Assim, cores, sombras e bordas podem ser reutilizadas no arquivo inteiro.
  Se quiser mudar a identidade visual do jogo, este é o primeiro lugar
  que você deve alterar.
*/
:root {
  /* Cor principal dos painéis, parecida com papel envelhecido */
  --panel: #f3f0e8;

  /* Cor principal do texto */
  --text: #2f2a24;

  /* Cor de texto secundário */
  --muted: #6e6559;

  /* Azul principal dos botões e destaques */
  --primary: #5b6ee1;

  /* Azul mais escuro usado em textos destacados */
  --primary-dark: #3949ab;

  /* Verde para mensagens de sucesso */
  --success: #2f9e44;

  /* Vermelho para alertas e erros */
  --danger: #c92a2a;

  /* Laranja para avisos */
  --warning: #e67700;

  /* Dourado usado em alertas, badges e destaque do marketplace */
  --gold: #d9a441;

  /* Cor escura das bordas pixeladas */
  --border-dark: #4b4237;

  /* Cor intermediária das bordas internas */
  --border-mid: #8c7f70;

  /* Sombra quadrada estilo pixel art para caixas grandes */
  --shadow-pixel: 6px 6px 0 #8e8ea1;

  /* Sombra quadrada dos botões */
  --shadow-button: 4px 4px 0 #4b4237;
}


/* ======================================================
   2. RESET BÁSICO
====================================================== */

/*
  Faz com que padding e border entrem no cálculo total da largura/altura.

  Isso evita problemas de layout, principalmente em inputs, botões
  e caixas responsivas.
*/
* {
  box-sizing: border-box;
}


/* ======================================================
   3. CORPO DA PÁGINA E FUNDO 8-BIT
====================================================== */

/*
  body define o fundo geral da aplicação.

  Aqui temos:
  - fonte pixelada principal;
  - fundo azul em faixas horizontais;
  - espaço inferior para a taskbar;
  - bloqueio de scroll horizontal.
*/
body {
  margin: 0;
  font-family: 'Press Start 2P', system-ui, monospace;
  color: var(--text);

  /*
    Fundo em faixas horizontais.
    A ideia é parecer um wallpaper 8-bit de desktop.
  */
  background: linear-gradient(
    180deg,
    #7aa2ff 0%,
    #86b0ff 22%,
    #9dc0ff 22%,
    #9dc0ff 44%,
    #8cb2ff 44%,
    #8cb2ff 66%,
    #7ea7ff 66%,
    #7ea7ff 100%
  );

  /* Ajuda imagens e gradientes a ficarem mais "pixelados" */
  image-rendering: pixelated;

  min-height: 100vh;
  position: relative;

  /* Evita que a taskbar cubra o conteúdo final */
  padding-bottom: 74px;

  overflow-x: hidden;
}

/*
  body::before cria uma camada decorativa fixa por cima do fundo.

  Essa camada adiciona:
  - pequenas linhas quadriculadas;
  - círculos suaves simulando nuvens/luzes;
  - textura visual sem interferir no clique do usuário.
*/
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(90deg, rgba(255,255,255,0.10) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0 8px, transparent 8px 16px),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.22) 0 18px, transparent 19px),
    radial-gradient(circle at 74% 20%, rgba(255,255,255,0.18) 0 14px, transparent 15px),
    radial-gradient(circle at 84% 72%, rgba(255,255,255,0.14) 0 20px, transparent 21px);

  opacity: 0.55;
  image-rendering: pixelated;
}


/* ======================================================
   4. CONTAINER PRINCIPAL
====================================================== */

/*
  .container envolve o título e a janela principal do jogo.

  No index.html, ele engloba:
  - section.hero;
  - section.game-card.
*/
.container {
  width: min(980px, 92%);
  margin: 28px auto;
  position: relative;

  /*
    z-index 2 garante que a janela principal fique acima da textura
    e dos ícones decorativos do desktop.
  */
  z-index: 2;
}


/* ======================================================
   5. ÍCONES DO DESKTOP
====================================================== */

/*
  .desktop-icons é a coluna de ícones à esquerda da tela.

  No HTML, ela contém:
  - Al Jazeera;
  - Corpus;
  - Market;
  - Notas.
*/
.desktop-icons {
  position: fixed;
  top: 22px;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;

  /*
    Fica atrás do container principal, mas ainda visível no fundo.
  */
  z-index: 1;
}

/*
  Cada ícone do desktop ocupa uma caixinha de texto + imagem.
*/
.desktop-icon {
  width: 88px;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  font-size: 9px;
  line-height: 1.8;
}

/*
  O ícone do marketplace é clicável.
  No JavaScript, o id shopIcon abre o modal de modos.
*/
#shopIcon {
  cursor: pointer;
}

/*
  .icon-tile é o quadradinho visual do ícone.
  Ele simula um ícone pixelado com borda grossa e gradiente.
*/
.desktop-icon .icon-tile {
  width: 52px;
  height: 52px;
  margin: 0 auto 8px;
  border: 4px solid #244a9b;
  box-shadow: 4px 4px 0 rgba(24,48,98,0.45);

  /*
    Gradiente em blocos de cor, lembrando pixel art.
  */
  background: linear-gradient(180deg, #fff6cf 0 22%, #f9d86d 22% 42%, #f58f3d 42% 60%, #df5b47 60% 100%);

  position: relative;
}

/*
  Desenha pequenos quadradinhos dentro do ícone,
  reforçando o efeito de miniatura pixelada.
*/
.desktop-icon .icon-tile::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 12px;
  height: 12px;
  background: #fff8ec;
  box-shadow: 16px 0 0 #fff8ec, 0 16px 0 #fff8ec, 16px 16px 0 #244a9b;
}

/*
  Variação azul do ícone.
  Usada no ícone "Corpus".
*/
.icon-blue {
  background: linear-gradient(180deg, #d9f0ff 0 22%, #95d5ff 22% 42%, #5ba7ff 42% 60%, #355fcb 60% 100%) !important;
}

/*
  Variação dourada do ícone.
  Usada no ícone "Market".
*/
.icon-gold {
  background: linear-gradient(180deg, #fff2c5 0 22%, #ffd166 22% 42%, #f4a261 42% 60%, #c97b29 60% 100%) !important;
}

/*
  Variação laranja do ícone.
  Usada no ícone "Notas".
*/
.icon-orange {
  background: linear-gradient(180deg, #ffe6c7 0 22%, #ffc27a 22% 42%, #ff8f52 42% 60%, #cf5f4a 60% 100%) !important;
}


/* ======================================================
   6. TASKBAR / BARRA INFERIOR DO DESKTOP
====================================================== */

/*
  .taskbar é a barra inferior fixa, parecida com barra de sistema operacional.

  No HTML, ela contém:
  - botão INICIAR;
  - aplicativos abertos;
  - área da direita com engrenagem e relógio.
*/
.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58px;

  background: linear-gradient(180deg, #39465f 0%, #273247 100%);
  border-top: 4px solid #101827;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 14px;

  /*
    z-index alto para ficar sempre acima do restante.
  */
  z-index: 50;

  box-shadow: 0 -4px 0 rgba(255,255,255,0.12) inset;
}

/*
  Agrupam os itens da esquerda e da direita da taskbar.
*/
.taskbar-left,
.taskbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*
  Estilo comum dos blocos da taskbar:
  - botão iniciar;
  - aplicativos;
  - ícones da bandeja;
  - relógio.
*/
.start-btn,
.task-app,
.tray-item,
.clock-box {
  border: 3px solid #101827;
  background: #d8dde8;
  box-shadow: 3px 3px 0 rgba(16,24,39,0.45);
  height: 38px;

  display: flex;
  align-items: center;

  padding: 0 10px;
  font-size: 9px;
  color: #1d2430;
}

/*
  Botão INICIAR.
*/
.start-btn {
  background: #ffcf66;
  min-width: 88px;
  justify-content: center;
}

/*
  Aplicativo principal ativo: AL JAZEERA APP.
*/
.task-app.active {
  background: #fff2c5;
  min-width: 210px;
  justify-content: center;
}

/*
  Aplicativos inativos e ícones da bandeja.
*/
.task-app.inactive,
.tray-item {
  background: #cbd3e2;
}

.market-task {
  cursor: pointer;
}

/*
  Ícone individual da bandeja.
*/
.tray-item {
  width: 38px;
  justify-content: center;
  padding: 0;
}

/*
  Botão da engrenagem de configurações.

  No HTML, é o botão #settingsBtn.
*/
.tray-button {
  font-family: 'Press Start 2P', system-ui, monospace;
  cursor: pointer;
  justify-content: center;
}

/*
  Relógio da taskbar.

  No HTML, aparece com horário e data fixos.
*/
.clock-box {
  background: #eef2fb;
  min-width: 122px;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}


/* ======================================================
   7. BORDAS GERAIS DO ESTILO PIXELADO
====================================================== */

/*
  Aplica borda grossa pixelada em elementos importantes.

  Isso padroniza:
  - hero;
  - janela do jogo;
  - caixas internas;
  - destaque árabe;
  - inputs;
  - textarea;
  - botões;
  - modal do marketplace.
*/
.hero,
.game-card,
.box,
.arabic-target,
input,
textarea,
button,
.shop-modal {
  border: 4px solid var(--border-dark);
  border-radius: 0;
}

/*
  Aplica sombra pixelada às caixas maiores.
*/
.hero,
.game-card,
.box,
.arabic-target {
  box-shadow: var(--shadow-pixel);
}


/* ======================================================
   8. HERO / CABEÇALHO EXPLICATIVO
====================================================== */

/*
  .hero é o bloco de apresentação do jogo.

  No HTML, contém:
  - badge;
  - h1;
  - parágrafo subtitle.
*/
.hero {
  background: var(--panel);
  padding: 24px;
  margin-bottom: 22px;
  position: relative;

  /*
    Fundo com textura leve de papel.
  */
  background-image:
    repeating-linear-gradient(0deg, rgba(75,66,55,0.02) 0px, rgba(75,66,55,0.02) 2px, transparent 2px, transparent 12px),
    linear-gradient(180deg, #f4efe4 0%, #e9e2d3 100%);
}

/*
  Borda interna tracejada no hero.
*/
.hero::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed var(--border-mid);
  pointer-events: none;
}

/*
  Badge acima do título:
  "Simulação de revisão editorial".
*/
.badge {
  display: inline-block;
  background: #fff3bf;
  color: var(--text);
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 3px solid var(--border-dark);
  box-shadow: 3px 3px 0 var(--gold);
  font-size: 10px;
  line-height: 1.6;
  text-transform: uppercase;
}

/*
  Título principal do jogo.
*/
h1 {
  margin: 0 0 16px;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.5;
  text-transform: uppercase;
}

/*
  Texto introdutório abaixo do título.
*/
.subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 2;
}


/* ======================================================
   9. JANELA PRINCIPAL DO JOGO
====================================================== */

/*
  .game-card é a janela principal da atividade.

  No index.html, ela contém:
  - topbar;
  - content com todos os blocos do exercício.
*/
.game-card {
  background: var(--panel);
  overflow: hidden;
  position: relative;

  background-image:
    repeating-linear-gradient(0deg, rgba(75,66,55,0.02) 0px, rgba(75,66,55,0.02) 2px, transparent 2px, transparent 12px),
    linear-gradient(180deg, #f4efe4 0%, #e9e2d3 100%);

  /*
    Faz a janela ocupar a tela sem ultrapassar muito.
    O conteúdo interno rola dentro da .content.
  */
  height: calc(100vh - 210px);
  min-height: 560px;

  display: flex;
  flex-direction: column;
}

/*
  Barra superior da janela do jogo.

  No HTML, contém:
  - progresso do caso;
  - indicador de modo.
*/
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  padding: 16px 18px;

  background: linear-gradient(180deg, #f8f5ee 0%, #e7e2d5 100%);
  border-bottom: 4px solid var(--border-dark);

  flex-wrap: wrap;
}

/*
  Textos da barra superior.
*/
.progress,
.mode-indicator {
  font-size: 12px;
  line-height: 1.7;
}

/*
  Indicador do modo ativo:
  "Modo: الإضافة", "Modo: Oração relativa", etc.
*/
.mode-indicator {
  color: var(--primary-dark);
}

/*
  .content é a área rolável dentro da janela principal.

  Isso permite que a página inteira não precise rolar tanto;
  o scroll acontece dentro da janela do jogo.
*/
.content {
  padding: 20px;

  background:
    linear-gradient(90deg, transparent 24px, rgba(75,66,55,0.05) 24px, rgba(75,66,55,0.05) 28px, transparent 28px),
    linear-gradient(180deg, #f4f0e8 0%, #ece6da 100%);

  overflow-y: auto;
  overflow-x: hidden;

  flex: 1;

  /*
    Estilo da barra de rolagem no Firefox.
  */
  scrollbar-width: auto;
  scrollbar-color: var(--border-dark) #d8dde8;
}

/*
  Largura da barra de rolagem em navegadores WebKit.
*/
.content::-webkit-scrollbar {
  width: 14px;
}

/*
  Trilha da barra de rolagem.
*/
.content::-webkit-scrollbar-track {
  background: #d8dde8;
  border-left: 3px solid var(--border-dark);
}

/*
  Parte móvel da barra de rolagem.
*/
.content::-webkit-scrollbar-thumb {
  background: #8c7f70;
  border: 3px solid var(--border-dark);
}

/*
  Efeito ao passar o mouse na barra de rolagem.
*/
.content::-webkit-scrollbar-thumb:hover {
  background: #6e6559;
}


/* ======================================================
   10. ÁREA DE METADADOS DO CASO
====================================================== */

/*
  .meta organiza as duas caixas superiores lado a lado:
  - Fonte;
  - Estrutura / fenômeno em foco.
*/
.meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

/*
  .box é o bloco visual genérico usado em várias partes do jogo.

  No HTML, aparece em:
  - fonte;
  - estrutura;
  - corpus;
  - tradução errada;
  - identificação do aluno;
  - resposta do aluno;
  - roteiro de comentário;
  - respostas registradas;
  - fim da revisão;
  - caixas do parecer editorial.
*/
.box {
  padding: 16px;
  background: #fbf8f1;
  margin-bottom: 18px;
  position: relative;
}

/*
  Borda interna decorativa das caixas.
*/
.box::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(75,66,55,0.15);
  pointer-events: none;
}

/*
  Títulos dentro das caixas.
*/
.box h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.8;
  text-transform: uppercase;
}

/*
  Labels menores, usados antes de campos ou informações.
*/
.label {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.8;
  text-transform: uppercase;
}

/*
  Label com mais espaço acima.
  Usado antes do campo "Justifique sua decisão".
*/
.label-spaced {
  margin-top: 14px;
}

/*
  Texto comum dentro das caixas de metadados.
*/
.meta .box div:not(.label) {
  font-size: 12px;
  line-height: 1.8;
}

/*
  Link "Abrir reportagem".

  No JavaScript, ele pode virar "Exercício interno"
  quando o caso não tem sourceUrl.
*/
.source-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.8;
  color: var(--primary-dark);
  text-decoration: none;
  background: #eef2fb;
  border: 3px solid var(--border-dark);
  padding: 8px 10px;
  box-shadow: 3px 3px 0 rgba(75,66,55,0.2);
}

/*
  Pequeno efeito de botão ao passar o mouse no link.
*/
.source-link:hover {
  transform: translate(1px, 1px);
}


/* ======================================================
   11. EXPRESSÃO ÁRABE EM FOCO
====================================================== */

/*
  .arabic-target mostra a estrutura/fenômeno em foco.

  No HTML, é a div id="arabicTarget".
  Para الإضافة, por exemplo, ela mostra a expressão árabe central.
*/
.arabic-target {
  direction: rtl;
  font-family: 'Noto Naskh Arabic', 'Amiri', serif;
  font-size: 30px;
  text-align: center;
  padding: 22px 16px;
  background: linear-gradient(180deg, #fefcf6 0%, #ece6da 100%);
  margin-bottom: 18px;
  line-height: 1.9;
  word-break: break-word;
}

.arabic-target-text {
  direction: rtl;
}

.target-transliteration {
  direction: ltr;
  unicode-bidi: isolate;
  margin-top: 6px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--primary-dark);
  text-align: center;
  letter-spacing: 0;
}


/* ======================================================
   12. CORPUS EM ÁRABE
====================================================== */

/*
  .corpus é o bloco onde aparece o trecho-base em árabe.

  No HTML, é a div id="corpusText".
  O JavaScript também injeta spans dentro dela quando há glossário.
*/
.corpus {
  direction: rtl;
  font-family: 'Noto Naskh Arabic', 'Amiri', serif;
  font-size: 24px;
  line-height: 2.3;
  background: #f3f4f8;
  border: 3px solid #d9dbe5;
  padding: 16px;
  color: #1f1f1f;
}

.corpus-transliteration {
  direction: ltr;
  unicode-bidi: isolate;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 3px solid #d9dbe5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  color: var(--muted);
  text-align: left;
  letter-spacing: 0;
}

/*
  Estilo para marcações <mark> no corpus.

  Útil se algum trecho do corpus vier destacado nos arquivos de casos.
*/
mark {
  background: #ffe08a;
  color: #000;
  padding: 2px 4px;
}


/* ======================================================
   13. CAIXA DA TRADUÇÃO PROBLEMÁTICA
====================================================== */

/*
  .translation-problem estiliza a caixa da tradução errada
  entregue pelo tradutor iniciante/aluno.
*/
.translation-problem {
  background: linear-gradient(180deg, #fff8db 0%, #f5edd0 100%);
  border-color: var(--gold);
}

/*
  Borda interna dourada da caixa de problema.
*/
.translation-problem::after {
  border-color: rgba(217,164,65,0.25);
}


/* ======================================================
   14. LISTA DE PERGUNTAS DE ORIENTAÇÃO
====================================================== */

/*
  .question-list estiliza a lista:
  "O que sua resposta pode comentar".
*/
.question-list {
  margin: 0;
  padding-left: 22px;
  font-size: 11px;
  line-height: 2.2;
}


/* ======================================================
   15. INPUTS E TEXTAREA
====================================================== */

/*
  Estilo geral dos campos de entrada:
  - nome do aluno;
  - tradução final;
  - justificativa.
*/
input,
textarea {
  width: 100%;
  padding: 14px;
  font-size: 12px;
  font-family: 'Press Start 2P', system-ui, monospace;
  background: #fffdf8;
  color: var(--text);
  outline: none;

  /*
    Sombra interna para parecer campo afundado.
  */
  box-shadow: inset 3px 3px 0 rgba(75,66,55,0.12);
}

/*
  Texto cinza que aparece dentro dos campos antes da digitação.
*/
input::placeholder,
textarea::placeholder {
  color: #9b907f;
  font-size: 10px;
  line-height: 1.8;
}

/*
  Campo de justificativa.

  Pode ser redimensionado verticalmente pelo usuário.
*/
textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.9;
}


/* ======================================================
   16. BOTÕES DE AÇÃO
====================================================== */

/*
  .actions organiza os botões principais:
  - Caso anterior;
  - Salvar resposta;
  - Mostrar parecer editorial;
  - Próximo caso;
  - Exportar Excel.
*/
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/*
  Estilo geral dos botões.
*/
button {
  padding: 14px 16px;
  font-family: 'Press Start 2P', system-ui, monospace;
  font-size: 11px;
  line-height: 1.7;
  cursor: pointer;

  /*
    Transição curta para parecer botão físico.
  */
  transition: transform 0.08s ease, box-shadow 0.08s ease;

  box-shadow: var(--shadow-button);
  text-transform: uppercase;
}

/*
  Efeito quando o mouse passa sobre o botão.
*/
button:hover {
  transform: translate(1px, 1px);
  box-shadow: 3px 3px 0 #4b4237;
}

/*
  Efeito quando o botão é clicado.
*/
button:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/*
  Estado de botão desativado.

  Usado, por exemplo, no primeiro caso para desativar "Caso anterior",
  e no último para desativar "Próximo caso".
*/
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none !important;
  box-shadow: 4px 4px 0 #4b4237;
}

/*
  Botão principal.
  No HTML, "Salvar resposta" usa .primary.
*/
.primary {
  background: var(--primary);
  color: #fff;
}

/*
  Botões secundários.
*/
.secondary {
  background: #ded7c9;
  color: var(--text);
}


/* ======================================================
   17. PARECER EDITORIAL
====================================================== */

/*
  .analysis é a área do parecer editorial.

  Inicialmente fica escondida.
  O JavaScript adiciona .show depois que o aluno salva a resposta
  e clica em "Mostrar parecer editorial".
*/
.analysis {
  display: none;
  gap: 14px;
  flex-direction: column;
  margin-top: 22px;
}

/*
  Mostra a área de análise quando a classe .show é adicionada.
*/
.analysis.show {
  display: flex;
}

/*
  Caixa "o que foi compreendido corretamente".
*/
.ok {
  background: #eaf7ee;
}

/*
  Título da caixa positiva.
*/
.ok h3 {
  color: var(--success);
}

/*
  Caixa que explica o problema/erro.
*/
.error {
  background: #fff0f0;
}

/*
  Título da caixa de erro.
*/
.error h3 {
  color: var(--danger);
}

/*
  Caixa com a melhor solução sugerida.
*/
.better {
  background: #eef1ff;
}

/*
  Título da caixa de solução melhor.
*/
.better h3 {
  color: var(--primary-dark);
}

/*
  Estilo de textos informativos:
  - parágrafos das caixas;
  - feedback final;
  - mensagens de resultado;
  - critérios.
*/
.box p,
.feedback,
.result,
.criteria-feedback {
  font-size: 11px;
  line-height: 2.1;
  margin: 0;
}

/*
  Feedback final do parecer editorial.
*/
.feedback {
  background: #fff3bf;
  border: 4px solid var(--gold);
  padding: 14px;
  box-shadow: var(--shadow-pixel);
  text-transform: uppercase;
}

/*
  Mensagens de resultado:
  - resposta salva;
  - erro de validação;
  - Excel exportado;
  - parecer liberado.
*/
.result {
  margin-top: 12px;
  padding: 10px 0 0;
}

/*
  Caixa de feedback por critérios.

  No HTML ela existe, mas no script atual fica escondida
  e pode ser usada em futuras versões.
*/
.criteria-feedback {
  margin-top: 12px;
  padding: 12px;
  background: #eef2fb;
  border: 3px solid var(--border-dark);
}

/*
  Classe utilitária para esconder elementos.

  No HTML é usada, por exemplo, em:
  - criteriaFeedback;
  - endBox;
  - settingsModal.
*/
.hidden {
  display: none !important;
}


/* ======================================================
   18. OVERLAY ESCURO DO MARKETPLACE
====================================================== */

/*
  .overlay cria a camada escura atrás do marketplace.

  No HTML, é a div id="overlay".
*/
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, 0.35);
  z-index: 10;
  display: none;
}

/*
  Mostra o overlay quando o JavaScript adiciona .show.
*/
.overlay.show {
  display: block;
}


/* ======================================================
   19. MARKETPLACE / MENU DE MODOS
====================================================== */

/*
  .shop-modal é a janela do marketplace.

  No projeto atual, ele funciona como seletor de modo:
  - الإضافة;
  - oração relativa;
  - concordância verbal.
*/
.shop-modal {
  position: fixed;
  top: 50%;
  left: 50%;

  /*
    Centraliza o modal na tela.
  */
  transform: translate(-50%, -50%);

  width: min(860px, 92vw);
  max-height: 82vh;
  overflow-y: auto;

  background: #efe7d9;
  box-shadow: 8px 8px 0 rgba(0,0,0,0.35);

  z-index: 12;
  display: none;
}

/*
  Mostra o marketplace quando o JavaScript adiciona .show.
*/
.shop-modal.show {
  display: block;
}

/*
  Cabeçalho do marketplace.

  Contém:
  - título;
  - botão X.
*/
.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;
  background: linear-gradient(180deg, #fff2c5 0%, #f3d27a 100%);
  border-bottom: 4px solid var(--border-dark);

  /*
    Fica preso no topo quando o marketplace rola.
  */
  position: sticky;
  top: 0;
}

/*
  Título "MARKETPLACE DE ESTUDOS".
*/
.shop-title {
  font-size: 12px;
  line-height: 1.8;
}

/*
  Botão X do marketplace.
*/
.shop-close {
  min-width: 46px;
  justify-content: center;
  background: #ffd6d6;
}

/*
  Corpo do marketplace.
*/
.shop-content {
  padding: 16px;
  background: linear-gradient(180deg, #f7f1e7 0%, #ece3d5 100%);
}

/*
  Caixa superior que informa:
  "Escolha o modo de estudo que deseja ativar."
*/
.shop-balance {
  margin-bottom: 16px;
  padding: 12px;
  border: 4px solid var(--border-dark);
  background: #fff9df;
  box-shadow: var(--shadow-pixel);
  font-size: 11px;
  line-height: 2;
}

/*
  Grade de cards do marketplace.
*/
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/*
  Card individual de cada modo.
*/
.shop-item {
  border: 4px solid var(--border-dark);
  background: #fbf8f1;
  box-shadow: var(--shadow-pixel);
  padding: 14px;
}

/*
  Título do card do modo.
*/
.shop-item h4 {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.8;
  text-transform: uppercase;
}

/*
  Descrição do modo no card.
*/
.shop-item p {
  margin: 0 0 12px;
  font-size: 10px;
  line-height: 2;
}

/*
  Rodapé do card.

  Contém:
  - badge "Em uso" ou "Disponível";
  - botão "Ativo" ou "Usar".
*/
.shop-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/*
  Selo de status do modo.
*/
.owned-badge {
  font-size: 10px;
  background: #eaf7ee;
  border: 3px solid #2f9e44;
  padding: 8px 10px;
  color: #1f6e31;
  text-transform: uppercase;
}


/* ======================================================
   20. PAINEL DE CONFIGURAÇÕES
====================================================== */

/*
  .settings-panel é o painel aberto pela engrenagem na taskbar.

  No HTML, é a div id="settingsModal".
*/
.settings-panel {
  position: fixed;
  right: 18px;
  bottom: 74px;

  width: min(420px, calc(100vw - 36px));

  background: #efe7d9;
  border: 4px solid var(--border-dark);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.35);

  z-index: 40;
}

/*
  Cabeçalho das configurações.
*/
.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;
  background: linear-gradient(180deg, #fff2c5 0%, #f3d27a 100%);
  border-bottom: 4px solid var(--border-dark);
}

/*
  Título "CONFIGURAÇÕES".
*/
.settings-title {
  font-size: 11px;
  line-height: 1.8;
}

/*
  Botão X do painel de configurações.
*/
.settings-close {
  min-width: 46px;
  justify-content: center;
  background: #ffd6d6;
}

/*
  Corpo das configurações.
*/
.settings-body {
  padding: 16px;
  background: linear-gradient(180deg, #f7f1e7 0%, #ece3d5 100%);
}

/*
  Linha clicável da configuração.

  No HTML, envolve:
  - checkbox;
  - texto "Mostrar ajuda de vocabulário ao passar o mouse".
*/
.settings-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  border: 4px solid var(--border-dark);
  background: #fbf8f1;
  box-shadow: var(--shadow-pixel);

  padding: 14px;
  font-size: 10px;
  line-height: 2;
  cursor: pointer;
}

/*
  Checkbox de ativação dos tooltips.
*/
.settings-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--primary);
  flex: 0 0 auto;
}

/*
  Texto explicativo abaixo da configuração.
*/
.settings-desc {
  margin: 14px 0 0;
  font-size: 10px;
  line-height: 2;
  color: var(--muted);
}


/* ======================================================
   21. TOOLTIP ANTIGO DA EXPRESSÃO EM FOCO
====================================================== */

/*
  Estas classes parecem ser de uma versão anterior,
  em que o tooltip ficava na expressão em foco, não no corpus.

  No HTML atual, o foco passou para os tooltips em palavras do corpus.
  Então essas classes podem ainda existir por compatibilidade,
  mas talvez não sejam mais usadas pelo script atual.
*/
.arabic-target.has-tooltip {
  cursor: help;
  position: relative;
}

/*
  Caixa genérica de tooltip antigo.
*/
.tooltip-box {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);

  min-width: 220px;
  max-width: 340px;
  padding: 12px;

  background: #fff9df;
  border: 4px solid var(--border-dark);
  box-shadow: var(--shadow-pixel);

  font-family: 'Press Start 2P', system-ui, monospace;
  font-size: 10px;
  line-height: 1.8;
  color: var(--text);

  z-index: 45;

  /*
    Como o tooltip tem português, espanhol ou metadados,
    ele fica da esquerda para a direita.
  */
  direction: ltr;
  text-align: left;
}

/*
  Destaque do título dentro do tooltip antigo.
*/
.tooltip-box strong {
  display: block;
  margin-bottom: 8px;
  color: var(--primary-dark);
  text-transform: uppercase;
}


/* ======================================================
   22. TOOLTIP DE VOCABULÁRIO NO CORPUS
====================================================== */

/*
  Quando os tooltips estão ativados, o JavaScript adiciona
  a classe .tooltips-enabled ao corpus.

  Aqui o cursor fica normal no bloco geral.
*/
.corpus.tooltips-enabled {
  cursor: default;
}

/*
  Cada palavra encontrada no glossário vira um span .corpus-word.

  O position: relative é necessário porque o tooltip será posicionado
  em relação à própria palavra.
*/
.corpus-word {
  position: relative;
  display: inline;
}

/*
  Palavra do corpus que tem tooltip lexical.

  O fundo amarelo bem leve indica que há ajuda disponível.
*/
.corpus-word.has-lexical-tooltip {
  cursor: help;
  background: rgba(255, 224, 138, 0.18);
  border-radius: 4px;
  transition: background 0.12s ease;
}

/*
  Ao passar o mouse, o destaque da palavra aumenta.
*/
.corpus-word.has-lexical-tooltip:hover,
.corpus-word.has-lexical-tooltip.tooltip-active {
  background: rgba(255, 224, 138, 0.38);
}

/*
  Balão de vocabulário que aparece ao passar o mouse sobre uma palavra.

  Ele é criado dinamicamente pelo JavaScript dentro do span da palavra.
*/
.corpus-tooltip-box {
  position: fixed;

  width: max-content;
  min-width: 220px;
  max-width: min(340px, calc(100vw - 24px));

  padding: 12px;

  background: #fff9df;
  border: 4px solid var(--border-dark);
  box-shadow: var(--shadow-pixel);

  font-family: 'Press Start 2P', system-ui, monospace;
  font-size: 10px;
  line-height: 1.8;
  color: var(--text);

  z-index: 9999;

  direction: ltr;
  text-align: left;

  /*
    Como o balão é apenas informativo, ele não captura o mouse.
    Isso evita piscadas quando o cursor passa perto da borda da tooltip.
  */
  pointer-events: none;
}

/*
  Título do tooltip: "Vocabulário".
*/
.corpus-tooltip-title {
  display: block;
  margin-bottom: 8px;
  color: var(--primary-dark);
  text-transform: uppercase;
}

/*
  Cada linha do tooltip:
  - Palavra;
  - Raiz;
  - PT.
*/
.corpus-tooltip-row {
  margin-bottom: 6px;
}

/*
  Remove margem extra da última linha do tooltip.
*/
.corpus-tooltip-row:last-child {
  margin-bottom: 0;
}


/* ======================================================
   23. RESPONSIVIDADE PARA TELAS MENORES
====================================================== */

/*
  Ajustes para telas de até 760px.

  Aqui o layout fica mais compacto:
  - ícones do desktop somem;
  - cards do marketplace ficam em uma coluna;
  - fontes diminuem;
  - corpus e expressão árabe ficam menores.
*/
@media (max-width: 760px) {
  /*
    Reduz altura mínima da janela do jogo no celular.
  */
  .game-card {
    height: calc(100vh - 170px);
    min-height: 420px;
  }

  /*
    Esconde ícones laterais para economizar espaço.
  */
  .desktop-icons {
    display: none;
  }

  /*
    Reduz largura do app ativo na taskbar.
  */
  .task-app.active {
    min-width: 132px;
  }

  /*
    Reduz botão iniciar.
  */
  .start-btn {
    min-width: 72px;
  }

  /*
    Reduz caixa do relógio.
  */
  .clock-box {
    min-width: 96px;
  }

  /*
    As caixas de fonte e estrutura deixam de ficar lado a lado
    e passam a ficar uma embaixo da outra.
  */
  .meta {
    grid-template-columns: 1fr;
  }

  /*
    Marketplace passa a ter uma coluna.
  */
  .shop-grid {
    grid-template-columns: 1fr;
  }

  /*
    Container ocupa quase toda a tela.
  */
  .container {
    width: min(96%, 96%);
  }

  /*
    Menos padding interno no conteúdo.
  */
  .content {
    padding: 14px;
  }

  /*
    Título menor.
  */
  h1 {
    font-size: 18px;
  }

  /*
    Tooltip menor em telas pequenas.
  */
  .corpus-tooltip-box {
    min-width: 180px;
    max-width: 260px;
    font-size: 9px;
  }

  /*
    Reduz vários textos da interface para caber melhor.
  */
  .subtitle,
  .progress,
  .mode-indicator,
  .meta .box div:not(.label),
  .box p,
  .feedback,
  .result,
  .criteria-feedback,
  .question-list,
  input,
  textarea,
  button,
  .source-link {
    font-size: 10px;
  }

  /*
    Reduz a expressão árabe em destaque.
  */
  .arabic-target {
    font-size: 24px;
  }

  /*
    Reduz o corpus em árabe.
  */
  .corpus {
    font-size: 20px;
    line-height: 2.1;
  }

  /*
    Ajusta o painel de configurações para caber em telas pequenas.
  */
  .settings-panel {
    right: 10px;
    bottom: 68px;
    width: min(360px, calc(100vw - 20px));
  }
}


/* ======================================================
   24. BLOCO FINAL DE TOOLTIP / COMPATIBILIDADE
====================================================== */

/*
  ATENÇÃO:
  A classe .corpus-word já foi definida acima.

  Este bloco redefine algumas propriedades dela.
  Como vem depois no CSS, ele pode sobrescrever parte da definição anterior.

  No estado atual, ele mantém:
  - position: relative;
  - cursor de ajuda;
  - borda arredondada;
  - transição.
*/
.corpus-word {
  position: relative;
  cursor: help;
  border-radius: 4px;
  transition: background 0.08s ease;
}

/*
  Efeito genérico de hover em qualquer .corpus-word.

  Como este bloco vem depois, ele pode afetar também palavras que tenham
  .has-lexical-tooltip.
*/
.corpus-word:hover {
  background: rgba(91, 110, 225, 0.10);
}

/*
  Se o corpus tiver a classe .has-tooltip,
  aumenta o z-index da tooltip-box.

  Parece ser compatibilidade com uma versão anterior do tooltip.
*/
.corpus.has-tooltip .tooltip-box {
  z-index: 46;
}

/*
  Classe para exibir árabe dentro de tooltip antigo.

  Pode ser útil se você quiser mostrar a palavra árabe dentro do balão.
*/
.tooltip-arabic {
  direction: rtl;
  font-family: 'Noto Naskh Arabic', 'Amiri', serif;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 8px;
}

/*
  Classe para metadados do tooltip antigo.

  Exemplo:
  - raiz;
  - tradução;
  - observação.
*/
.tooltip-meta {
  font-size: 10px;
  line-height: 1.8;
  text-transform: none;
}

/*
  Espaçamento entre linhas de metadados do tooltip.
*/
.tooltip-meta div + div {
  margin-top: 6px;
}


/* ======================================================
   25. CAMADA MOBILE: MINI COMPUTADOR PIXELADO
====================================================== */

/*
  Em telas pequenas, a interface mantém a ideia de janela de computador,
  mas usa melhor a altura real do celular e aumenta a área tocável.
*/
@media (max-width: 760px) {
  body {
    min-height: 100dvh;
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  body::before {
    opacity: 0.42;
  }

  .container {
    width: calc(100% - 24px);
    margin: 10px auto 12px;
  }

  .hero {
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 4px 4px 0 #8e8ea1;
  }

  .hero::after {
    inset: 6px;
  }

  .badge {
    max-width: 100%;
    padding: 7px 8px;
    margin-bottom: 10px;
    font-size: 8px;
    line-height: 1.6;
  }

  h1 {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.45;
  }

  .subtitle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 9px;
    line-height: 1.8;
  }

  .game-card {
    height: auto;
    min-height: 0;
    box-shadow: 4px 4px 0 #8e8ea1;
  }

  .topbar {
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }

  .progress,
  .mode-indicator {
    flex: 1 1 120px;
    font-size: 9px;
    line-height: 1.6;
  }

  .mode-indicator {
    text-align: right;
  }

  .content {
    padding: 10px;
    overflow: visible;
    background:
      linear-gradient(90deg, transparent 16px, rgba(75,66,55,0.05) 16px, rgba(75,66,55,0.05) 20px, transparent 20px),
      linear-gradient(180deg, #f4f0e8 0%, #ece6da 100%);
  }

  .content::-webkit-scrollbar {
    width: 10px;
  }

  .meta {
    gap: 10px;
    margin-bottom: 14px;
  }

  .box,
  .arabic-target {
    box-shadow: 4px 4px 0 #8e8ea1;
  }

  .box {
    padding: 12px;
    margin-bottom: 14px;
  }

  .box::after {
    inset: 5px;
  }

  .box h3 {
    margin-bottom: 10px;
    font-size: 10px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }

  .label {
    font-size: 8px;
    line-height: 1.7;
  }

  .meta .box div:not(.label),
  .box p,
  .feedback,
  .result,
  .criteria-feedback,
  .question-list,
  input,
  textarea,
  .source-link {
    font-size: 9px;
  }

  .source-link {
    width: 100%;
    padding: 8px;
    text-align: center;
  }

  .arabic-target {
    padding: 14px 10px;
    margin-bottom: 14px;
    font-size: 24px;
    line-height: 1.85;
  }

  .target-transliteration {
    font-size: 13px;
    line-height: 1.55;
  }

  .corpus {
    padding: 12px;
    font-size: 21px;
    line-height: 2.05;
  }

  .corpus-transliteration {
    margin-top: 12px;
    padding-top: 10px;
    font-size: 12px;
    line-height: 1.65;
  }

  .corpus-word.has-lexical-tooltip {
    cursor: pointer;
  }

  input,
  textarea {
    padding: 12px;
    font-family: system-ui, sans-serif;
    font-size: 16px;
  }

  input {
    min-height: 46px;
  }

  textarea {
    min-height: 150px;
  }

  input::placeholder,
  textarea::placeholder {
    font-size: 14px;
  }

  .question-list {
    padding-left: 18px;
    line-height: 2;
  }

  .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "save save" "review review" "prev next" "export export";
    gap: 12px;
    padding: 14px 12px 16px;
    margin: 6px 0 22px;
    border: 2px solid #c6beaf;
    background: #e8e2d6;
    box-shadow: inset 0 2px 0 #fffaf0;
  }

  .actions button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 8px;
    border-width: 2px;
    border-radius: 4px;
    font-size: 9px;
    line-height: 1.8;
    overflow-wrap: normal;
    box-shadow: 2px 3px 0 var(--border-dark);
    touch-action: manipulation;
  }

  #saveBtn { grid-area: save; min-height: 54px; background: #4c5ed0; }
  #showBtn { grid-area: review; background: #f8f5ee; }
  #prevBtn { grid-area: prev; }
  #nextBtn { grid-area: next; }
  #exportBtn { grid-area: export; background: #e1eadd; border-color: #52624b; color: #304329; }

  .actions button:disabled { box-shadow: none; opacity: 0.5; }
  .actions button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
  button:focus-visible, .source-link:focus-visible { outline: 3px solid var(--primary-dark); outline-offset: 4px; }

  .feedback {
    padding: 12px;
    box-shadow: 4px 4px 0 #8e8ea1;
  }

  .shop-modal {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
  }

  .shop-header,
  .settings-header {
    padding: 10px 12px;
  }

  .shop-title,
  .settings-title {
    font-size: 10px;
  }

  .shop-content,
  .settings-body {
    padding: 12px;
  }

  .shop-balance,
  .shop-item,
  .settings-row {
    box-shadow: 4px 4px 0 #8e8ea1;
  }

  .settings-panel {
    right: 8px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 100px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    width: calc(100vw - 16px);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
  }

  .settings-row {
    align-items: center;
    padding: 12px;
  }

  .settings-desc {
    font-size: 9px;
  }

  .corpus-tooltip-box {
    min-width: 190px;
    max-width: calc(100vw - 24px);
    padding: 10px;
    font-size: 9px;
    box-shadow: 4px 4px 0 #8e8ea1;
  }

  .taskbar {
    height: auto;
    min-height: 68px;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .taskbar-left,
  .taskbar-right {
    min-width: 0;
    gap: 6px;
  }

  .taskbar-left {
    flex: 1 1 auto;
  }

  .taskbar-right {
    flex: 0 0 auto;
  }

  .start-btn,
  .task-app,
  .tray-item,
  .clock-box {
    height: 44px;
    padding: 0 7px;
    font-size: 8px;
    box-shadow: 2px 2px 0 rgba(16,24,39,0.45);
  }

  .start-btn {
    display: none;
  }

  .task-app.active {
    flex: 1 1 48px;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    justify-content: flex-start;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .task-app.inactive {
    display: none;
  }

  .task-app.market-task {
    display: flex;
    flex: 0 0 70px;
    min-width: 70px;
    justify-content: center;
    background: #fff2c5;
  }

  .tray-item {
    width: 44px;
    font-family: system-ui, sans-serif;
    font-size: 22px;
  }

  .tray-item:not(.tray-button), .clock-box { display: none; }

  .clock-box {
    min-width: 72px;
    line-height: 1.15;
  }
}

@media (max-width: 420px) {
  .container {
    width: calc(100% - 20px);
    margin-top: 6px;
  }

  .hero {
    padding: 10px;
  }

  .badge {
    display: none;
  }

  .subtitle {
    display: none;
  }

  .game-card {
    height: auto;
    min-height: 0;
  }

  h1 {
    margin-bottom: 0;
    font-size: 15px;
  }

  .topbar {
    padding: 9px 10px;
  }

  .progress,
  .mode-indicator {
    flex-basis: 100%;
    text-align: left;
  }

  .task-app.active {
    max-width: none;
  }

  .task-app.market-task {
    flex-basis: 64px;
    min-width: 64px;
  }

  .tray-item:not(.tray-button) {
    display: none;
  }

  .clock-box {
    min-width: 60px;
  }

  .clock-box div:nth-child(2) {
    display: none;
  }
}


/* ======================================================
   26. RÓTULOS EM ÁRABE
====================================================== */

/*
  Os rótulos curtos em árabe precisam de fonte própria para não ficarem
  apagados dentro dos botões pixelados.
*/
.desktop-icon [lang="ar"],
.shop-title[lang="ar"],
.market-task[lang="ar"],
#endBox [lang="ar"] {
  font-family: 'Noto Naskh Arabic', 'Amiri', serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.desktop-icon [lang="ar"] {
  font-size: 15px;
  line-height: 1.3;
}

.shop-title[lang="ar"] {
  font-size: 22px;
  line-height: 1.35;
}

.market-task[lang="ar"] {
  align-items: center;
  font-size: 19px;
  line-height: 1;
  padding-bottom: 2px;
}

@media (max-width: 420px) {
  .market-task[lang="ar"] {
    font-size: 18px;
  }
}