/* Letris — tema "tipografia móvel": tabuleiro como uma caixa de tipos de madeira,
   letras carimbadas em papel envelhecido, palavras confirmadas em tinta vermelha. */

:root{
  --ink:      #1B1A17;
  --panel:    #24221D;
  --paper:    #EDE6D6;
  --paper-dim:#D8CFB8;
  --muted:    #9C9483;
  --red-ink:  #B3121A;
  --gold-ink: #C9971F;
  --extra-ink:#4C7A93;
  --line:     #3A362E;
  --font-ui:  -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-type:"Courier New", ui-monospace, monospace;

  /* Cores das peças do tabuleiro — separadas de --paper/--gold-ink/--ink pra poder
     trocar a pintura das peças junto com o modo dia/noite, sem afetar o resto da UI.
     Padrão = modo noite: tom fosco, mais confortável pra sala escura. */
  --tile-locked: #B7AC90;
  --tile-active: #9C7A28;
  --tile-text:   var(--ink);

  /* Camadas gerais da UI (fundo da página, painéis, texto, bordas) — variáveis
     dedicadas pro modo dia/noite. Propositalmente separadas de --ink/--paper, que
     continuam fixos e usados no modal "carimbo" e nos botões de ação, cujo
     visual não deve mudar entre os dois modos. Padrão = modo noite (UI escura). */
  --bg:        var(--ink);
  --bg-panel:  var(--panel);
  --text:      var(--paper);
  --border:    var(--line);
  --canvas-bg: #12110F;

  /* --accent-ink é o "--gold-ink usado em texto/UI fora do tabuleiro" (badges, próximas
     letras, fase, itens do log etc.) — separado de --gold-ink porque --tile-active no
     modo dia referencia --gold-ink diretamente, e esse não pode mudar (são as letras
     dentro do jogo, que já estão boas). Por padrão os dois são o mesmo tom. */
  --accent-ink: var(--gold-ink);

  /* Linha tracejada entre as palavras do log — separada de --border porque --border
     também desenha bordas de painel/botão, que podem ficar mais discretas sem prejuízo;
     o traço entre palavras precisa de mais definição pra realmente separar uma linha
     da outra. Por padrão os dois são o mesmo tom (funciona bem no modo noite). */
  --log-divider: var(--border);
}

/* Modo dia/noite: um único toggle "☀️ Dia" / "🌙 Noite" na topbar. A classe .day-mode
   troca de uma vez só a paleta geral (fundo/painéis/texto/bordas) E as cores das peças
   (que voltam a ser vívidas — --paper/--gold-ink — já que numa sala clara o contraste
   forte não incomoda). Sem a classe = modo noite: UI escura + peças foscas. */
:root.day-mode{
  --bg:        #F2ECDC;
  --bg-panel:  #E4DCC3;
  --text:      #1B1A17;
  --border:    #BC9E4E;
  --canvas-bg: #D9D0B8;

  --tile-locked: var(--paper);
  --tile-active: var(--gold-ink);

  /* Linhas de grade e letra da peça, suavizadas só no modo dia: --line puro
     (quase preto) e --ink puro ficavam duros demais em cima do papel claro.
     Ainda contrastam o bastante pra separar célula e ler a letra (a peça
     ativa, sobre o dourado, é o caso mais apertado — ~4,7:1), só que sem
     o peso "escrito a nanquim" que fazia sentido no modo noite. */
  --line:      #7C6C48;
  --tile-text: #3F3320;

  /* --muted e --gold-ink foram calibrados pra pop em cima de fundo ESCURO — no papel
     claro do modo dia eles quase somem (contraste ~2:1, bem abaixo do mínimo de 4,5:1
     pra texto). Aqui entram versões mais escuras e SATURADAS dos mesmos tons — ainda
     "dourado"/"acastanhado", mantendo a identidade, só que vívidas e legíveis. --gold-ink
     em si fica intocado (é o que pinta as peças no tabuleiro, que já está bom). */
  --muted:        #67511E;
  --accent-ink:   #704900;
  --extra-ink:    #11435F;
  --repeated-ink: #66531D;
  --log-divider:  #6E5C38;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:24px 16px;
}

#app{ width:100%; max-width:760px; }

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}

.logo{
  font-family:var(--font-type);
  letter-spacing:0.14em;
  font-size:28px;
  margin:0;
  color:var(--text);
}
.logo span{ color:var(--red-ink); }

.topbar-controls{ display:flex; align-items:center; gap:8px; }
.topbar-controls label{ font-size:12px; color:var(--muted); }

select{
  background:var(--bg-panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:4px;
  padding:6px 8px;
  font-family:var(--font-ui);
  font-size:13px;
}

.badge{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
}
.badge.online{ color:var(--accent-ink); border-color:var(--accent-ink); }
.badge.offline{ color:var(--red-ink); border-color:var(--red-ink); }

.badge.toggle{
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  color:var(--accent-ink);
  border-color:var(--accent-ink);
  transition:color .15s ease, border-color .15s ease, opacity .15s ease;
}
.badge.toggle:hover{ opacity:.75; }

.layout{ display:flex; gap:20px; flex-wrap:wrap; }

.board-wrap{
  position:relative;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px;
  width:100%;
  max-width:400px;
  margin:0 auto;
}

canvas{
  display:block;
  border-radius:3px;
  background:var(--canvas-bg);
  width:100%;
  height:auto;
}

.mobile-controls{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.ctrl-btn{
  flex:1;
  aspect-ratio: 1 / 1; /* Garante que altura e largura sejam iguais */
  min-height:48px;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:6px;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.ctrl-btn:active{ background:var(--red-ink); }
#btn-pause{ font-size:16px; }

.side-panel{
  flex:1;
  min-width:180px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.stat{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.stat.small{ padding:8px 12px; }
.stat-label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.stat-value{ font-family:var(--font-type); font-size:26px; }
.next-letter{ color:var(--accent-ink); font-size:22px; letter-spacing:.05em; }

/* "Fase" reduzida — é um id, então ganha de .stat-value (26px) por especificidade,
   sem precisar !important nem duplicar a classe. */
#stage-indicator{ font-size:18px; color:var(--accent-ink); }
#stage-indicator.stage-pulse{ animation:letris-stamp .5s ease-out; }

.log{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px 12px;
  flex:1;
  min-height:120px;
  max-height:340px;
  overflow-y:auto;
}
.log-title{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:0 0 6px; }
#word-log{ list-style:none; margin:0; padding:0; font-family:var(--font-type); font-size:14px; }
#word-log li{ padding:3px 0; border-bottom:1px dashed var(--log-divider); display:flex; justify-content:space-between; }
#word-log li.bonus{ color:var(--accent-ink); }
#word-log li.repeated{ color:var(--repeated-ink, #8a8577); font-style:italic; }

/* Palavra "extra": válida, mas fora da checklist da fase atual (geralmente de uma
   fase futura) — carimbo de tinta azulada, pra não ser confundida com bônus (dourado)
   nem com repetida (cinza itálico). */
#word-log li.extra{
  background:rgba(76,122,147,0.16);
  border-radius:4px;
  padding-left:6px;
}
#word-log li.extra span:first-child{ color:var(--extra-ink); }
#word-log li.extra span:last-child{ color:var(--extra-ink); }

/* Checklist do nível ultra-fácil */
#word-log li.pending{ opacity:.5; }
#word-log li.pending .tag{ color:var(--accent-ink); }
#word-log li.bonus-target span:first-child{ color:var(--accent-ink); }
#word-log li.found {
  opacity:1;
  background:rgba(201,151,31,0.14);
  border-radius:4px;
  padding-left:6px;
  animation:letris-stamp .25s ease-out;
}
#word-log li.found span:first-child{
  text-decoration:line-through;
  text-decoration-color:var(--red-ink);
  color:var(--text);
}
#word-log li.found .tag{ color:var(--accent-ink); font-weight:bold; }

@keyframes letris-stamp{
  from{ transform:scale(1.12); }
  to{ transform:scale(1); }
}

.controls-help{ font-size:11px; color:var(--muted); }

/* Modal de confirmação — "carimbo" de tinta */
.modal{
  position:absolute; inset:0;
  background:rgba(18,17,15,.82);
  display:flex; align-items:center; justify-content:center;
  border-radius:3px;
}
.modal.hidden{ display:none; }
.modal-card{
  background:var(--paper);
  color:var(--ink);
  padding:22px 26px;
  border-radius:4px;
  text-align:center;
  min-width:220px;
  max-width:min(320px, 82vw);
  box-shadow:0 0 0 3px var(--red-ink) inset;
}
.modal-eyebrow{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red-ink); margin:0 0 6px;
}
/* Ilustração da palavra formada — fundo transparente de propósito: se o arquivo tiver
   alfa (PNG/WEBP/GIF), o --paper do próprio .modal-card aparece por trás em vez de um
   retângulo de fundo artificial. object-fit:contain preserva a proporção original.
   Tamanho grande de propósito: pro público infantil, a ilustração precisa ser o
   elemento que mais chama atenção no modal, não um detalhe pequeno ao lado do texto.
   min(240px, 60vw) evita que ela estoure a tela em celulares pequenos. */
#modal-word-image{
  display:block;
  width:min(240px, 60vw);
  height:min(240px, 60vw);
  margin:0 auto 14px;
  background:transparent;
  object-fit:contain;
}

#modal-word{
  font-family:var(--font-type);
  font-size:34px;
  letter-spacing:.08em;
  margin:0 0 6px;
  color:var(--red-ink);
}
.modal-detail{ font-size:13px; color:#5a5647; margin:0 0 14px; }
.modal-card-gameover h2{
  font-family:var(--font-type);
  font-size:32px;
  letter-spacing:.06em;
  margin:0 0 6px;
  color:var(--red-ink);
}
.modal-actions{ display:flex; gap:10px; justify-content:center; }
.modal-hint{ font-size:11px; color:#8a8577; margin:10px 0 0; }

.btn{
  border:none; border-radius:4px; padding:8px 14px;
  font-family:var(--font-ui); font-size:13px; cursor:pointer;
}
.btn-primary{ background:var(--red-ink); color:var(--paper); }
.btn-ghost{ background:transparent; border:1px solid var(--muted); color:var(--ink); }

/* Overlay de pause — diferente dos demais modais (.modal-card) de propósito: aqui o
   tabuleiro precisa continuar visível por baixo, só escurecido, pra o jogador poder
   "pensar" olhando a jogada parada. Não é um "carimbo" de confirmação, é um estado
   do jogo — por isso não reaproveita .modal-card (fundo --paper, sombra, etc). */
.pause-overlay{
  position:absolute; inset:0;
  background:rgba(18,17,15,.72);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  border-radius:3px;
  cursor:pointer;
}
.pause-overlay.hidden{ display:none; }

.pause-overlay .pause-label{
  font-family:var(--font-type);
  font-size:38px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--paper);
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.pause-overlay .pause-hint{
  font-family:var(--font-ui);
  font-size:12px;
  letter-spacing:.03em;
  color:var(--paper);
  opacity:.75;
}

/* Esconde visualmente mas mantém acessível (foco de teclado, leitores de tela).
   Usado no #resume-btn: o clique-em-qualquer-lugar do .pause-overlay já cobre o
   caso visual/mouse, isso aqui cobre quem navega só por teclado. */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 620px){
  /* "Dicionário" e "Nível" já ficam óbvios pelo próprio texto selecionado no <select>
     (ex: "Fácil"), então os <label> somem no mobile — sem eles, o badge de
     online/offline e o toggle ☀️/🌙 (que vêm depois na mesma linha) deixam de ser
     empurrados pra fora da tela. O nome acessível continua existindo via
     aria-label nos próprios <select>, então isso não tira nada de leitores de tela. */
  label[for="dict-select"], label[for="level-select"]{ display:none; }

  /* No desktop, .side-panel é uma coluna normal ao lado do tabuleiro. No mobile,
     ele vira "display:contents": perde a própria caixa e deixa os filhos (.stat,
     .log, .controls-help) participarem diretamente do grid de .layout — só assim
     dá pra reposicionar cada stat individualmente (ex: fase e próximas letras
     acima do tabuleiro) sem duplicar elementos/ids. */
  .layout{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "stage next"
      "board board"
      "log   log"
      "score score"
      "help  help";
    gap:10px;
  }
  .side-panel{ display:contents; }

  #stage-stat{ grid-area: stage; margin:0; }
  #next-letter-stat{ grid-area: next; margin:0; }
  .board-wrap{ grid-area: board; margin:0 auto; max-width:480px; width:100%; }
  .log{ grid-area: log; margin:0; }
  #score-stat{ grid-area: score; margin:0; }
  .controls-help{ grid-area: help; margin:0; }

  /* Fase e próximas letras ficam lado a lado nessa linha do grid. "Fase" já tem
     tamanho reduzido em qualquer tela (#stage-indicator, acima); "Próximas letras"
     só precisa encolher aqui no mobile, pra caber ao lado sem quebrar linha. */
  #next-letter-stat .stat-value{ font-size:20px; }

  /* Item de grid/flex, por padrão, tem min-width:auto — ou seja, nunca encolhe
     abaixo do tamanho do próprio conteúdo (texto sem quebra, por exemplo). Isso
     pode fazer conteúdo comprido forçar a coluna inteira do grid (e, por tabela,
     a página toda) a alargar pra caber sem cortar. min-width:0 libera o encolhimento. */
  #score-stat, #next-letter-stat, #stage-stat,
  .log, .controls-help, .board-wrap{
    min-width:0;
  }
}