/*
 * Letmaze — mecânica exclusiva (labirinto + tokens animados). A
 * casca genérica (topbar, badges, modais, stats, log) vem de
 * ../shared/base.css; cores/tipografia vêm do tema terra
 * (../shared/styles/theme-terra.css, fixo — não há "dicionário" cujo tema
 * trocar, ver index.php).
 */

/* .layout (shared/base.css) é flex por padrão — bom o bastante pro
   Letris/Letrix, mas aqui precisamos que FASE/PONTUAÇÃO (.top-stats)
   troquem de posição visual inteira em telas estreitas (pra cima do
   labirinto, lado a lado) sem duplicar HTML nem mexer na ordem real do
   DOM (ver index.php: .top-stats já nasce entre .board-column e
   .side-panel, exatamente a posição de leitura que ele tinha antes de ser
   extraído de dentro de .side-panel). CSS Grid com áreas nomeadas resolve
   isso de graça: só redefinir `grid-template-areas` no media query move
   tudo, sem tocar em `order` (que não teria como empurrar .top-stats pra
   dentro da coluna do labirinto em telas largas, já que ele viraria só
   mais um item numa linha/coluna, não uma área com formato próprio). */
.layout{
  display: grid;
  /* side em minmax(180px, 200px) — ~10% mais estreito que a faixa
     200-220px (que já era referenciada no .side-panel do Letrix, ver
     base.css: flex:1/min-width:180px + min-width:200px no letrix.css) por
     pedido explícito, pra sobrar ainda mais coluna pro board-column. Era
     minmax(220px, 300px) originalmente — o teto de 300px deixava o painel
     mais largo que o do Letrix e roubava espaço horizontal do tabuleiro
     (.maze-cell não tem limite de altura, só largura-do-tabuleiro/cols —
     quanto mais coluna sobra pro board, maior a célula em fases avançadas,
     ver config.php -> maze.max_size). */
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 200px);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "board topstats"
    "board side";
  gap: 20px;
}

.board-column{
  grid-area: board;
}

.top-stats{
  grid-area: topstats;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.side-panel{
  grid-area: side;
  min-width: 0;
}

.board-wrap{
  /* Mesmo truque do Letris/Letrix: z-index próprio evita que .stat-accent
     (barra ::before) do side-panel pinte por cima de qualquer coisa que
     escape da caixa do board-wrap. min-height evita colapso quase-zero
     antes do primeiro "Jogar" (senão #start-modal, position:absolute
     dentro dele, fica confinado a uma altura quase-zero). */
  position: relative;
  z-index: 1;
  min-height: 320px;
  padding: 14px;
}

.board-wrap.has-grid{
  background: var(--panel-texture, none), var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--card-shadow, 0 2px 6px rgba(0,0,0,.3));
}

/* .modal (base.css) não define z-index próprio (fica em "auto"). Os tokens
   (.token-sheep/.token-wolf, logo abaixo) têm z-index POSITIVO explícito
   pra ovelha ficar por cima dos lobos — mas como .board-wrap já é a
   stacking context mais próxima (position:relative + z-index:1, também
   logo acima), um z-index positivo qualquer dentro dela pinta por cima de
   QUALQUER elemento com z-index:auto da mesma context, modal incluído,
   não importa a ordem no HTML. Sem isto, os tokens ficavam visíveis por
   cima do card de fim de fase/derrota. Um valor bem acima do maior
   z-index de token (2) resolve pros três modais que podem abrir com o
   labirinto ainda montado por trás (start/win/give-up/field-change/howto).
*/
.modal{
  z-index: 5;
}

/* #howto-modal (shared/base.css) traz seu próprio z-index:3 num seletor
   por ID — que, por especificidade CSS, VENCE o `.modal{z-index:5}`
   acima (ID sempre bate classe, independente da ordem dos arquivos).
   Isso deixaria #howto-modal com z-index MENOR que start/win/give-up/
   field-change (5), abrindo atrás deles — diferente do Letrix/Letchess,
   onde `.modal` base fica em z-index:auto e o z-index:3 já é suficiente.
   Especificidade igual (ID vs ID) decide por ordem de arquivo — como este
   arquivo carrega DEPOIS de shared/base.css, esta regra vence e bate o 5
   de cima. #stats-modal tem o mesmo problema, mas é resolvido direto em
   public/css/stats-panel.css (que carrega DEPOIS deste arquivo — um
   z-index maior aqui seria vencido por aquele, na ordem inversa). */
#howto-modal{
  z-index: 6;
}

/* Nem #start-modal nem #win-modal têm algo "escondido" pra proteger do
   scrim escuro padrão de .modal (base.css): #start-modal é a primeira tela
   (nada atrás ainda); #win-modal cobre um labirinto que ou foi resolvido,
   ou já teve o caminho revelado (Desistir/game over) — está tudo às claras
   no momento em que o modal abre. Mesmo raciocínio do Letrix. */
#start-modal{
  background: transparent;
  align-items: flex-start;
}
#win-modal{
  background: transparent;
}

/* Card arrastável (ver makeCardDraggable() em game.js) — cursor sinaliza
   que dá pra mover pra ver o labirinto por trás; touch-action:none evita
   que o navegador tente rolar a página no lugar de arrastar no toque. */
#win-card{
  cursor: grab;
  touch-action: none;
}
#win-card.dragging{
  cursor: grabbing;
  user-select: none;
}

.maze-grid{
  position: relative;
  display: grid;
  gap: 0;
  user-select: none;
  -webkit-user-select: none;
}

.board-wrap.has-grid .maze-grid{
  background: var(--canvas-bg);
  border: 2px solid var(--border);
  border-radius: var(--tile-radius);
}

.maze-cell{
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 0 solid var(--border);
  cursor: pointer;
}

/* Toque/clique numa célula fora de uma reta válida a partir da ovelha, ou
   numa reta já bloqueada por parede logo na primeira célula (ver
   computeStraightWalk() em game.js) — pisca em vermelho e não muda nada,
   mesmo espírito do .ws-cell.wrong do Letrix. */
.maze-cell.tap-invalid{
  animation: letmaze-tap-invalid .26s ease;
}
@keyframes letmaze-tap-invalid{
  0%, 100%{ background: transparent; }
  50%{ background: rgba(193,87,61,.35); }
}

/* Célula de chegada: só o ícone de cercado marca ela, sem tom de fundo —
   a figura (::after, SVG embutido via data URI — mesmo truque já usado em
   shared/base.css pra seta do <select>) tem que ficar com fundo transparente,
   não um quadrado colorido atrás dela. Não é um token gerenciado por JS: ele
   nunca se move, diferente da ovelha/lobos. Antes era o emoji de bandeira
   (🏁); trocado pra combinar com o texto "chegou ao cercado" do modal de
   vitória (ver i18n) — nenhum dos dois fala mais em bandeira. */
.maze-cell.cell-end{
  position: relative;
}
.maze-cell.cell-end::after{
  content: "";
  position: absolute;
  inset: 16%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='10' y='20' width='13' height='66' rx='3' fill='%238B6142'/%3E%3Crect x='43.5' y='15' width='13' height='71' rx='3' fill='%238B6142'/%3E%3Crect x='77' y='20' width='13' height='66' rx='3' fill='%238B6142'/%3E%3Crect x='5' y='32' width='90' height='12' rx='3' fill='%236B4A30'/%3E%3Crect x='5' y='60' width='90' height='12' rx='3' fill='%236B4A30'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

/* Item de vida extra ("touça de capim" — a cada N fases, ver config.php ->
   extra_life_item), sempre fora do caminho-solução. Mesmo padrão do
   .cell-end: ícone só decorativo via ::after, nunca um token gerenciado
   por JS como ovelha/lobo — só sua PRESENÇA/AUSÊNCIA muda (removeItemMarker()
   em game.js tira a classe quando a ovelha pega). Emoji de erva (🌿) já é
   reconhecível o bastante, sem precisar de outro ícone SVG desenhado à
   mão. Pulsação sutil chama atenção — está fora da rota direta, fácil de
   passar batido sem destaque nenhum. */
.maze-cell.cell-item{
  position: relative;
}
.maze-cell.cell-item::after{
  content: "🌿";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120%;
  line-height: 1;
  pointer-events: none;
  animation: letmaze-item-pulse 1.6s ease-in-out infinite;
}
@keyframes letmaze-item-pulse{
  0%, 100%{ transform: scale(1); opacity: .85; }
  50%{ transform: scale(1.15); opacity: 1; }
}

/* As 4 classes de parede são combináveis por célula (uma célula pode ter
   parede nos 4 lados). Só N/W são desenhados por TODA célula; S/E só pelas
   células da última linha/coluna — cada parede interna já é a parede N (ou
   W) da célula vizinha, desenhar dos dois lados dobraria a espessura numa
   linha só. */
.maze-cell.wall-n{ border-top-width: 3px; }
.maze-cell.wall-w{ border-left-width: 3px; }
.maze-cell.wall-s{ border-bottom-width: 3px; }
.maze-cell.wall-e{ border-right-width: 3px; }

/* Caminho-solução revelado (Desistir ou sem mais tentativas — ver
   revealSolutionPath() em game.js). Tom neutro/discreto de propósito: não é
   uma conquista, é só uma consolação depois que a fase já terminou — vale
   pra célula de chegada também, sem override: o ícone de cercado continua
   sem fundo próprio. */
.maze-cell.path-reveal{
  background: rgba(217,164,65,0.16);
}

/* --- tokens (ovelha / lobos) --------------------------------------------
   Posicionados de forma absoluta dentro de .maze-grid (position:relative),
   movidos via transform:translate() calculado em game.js a partir da
   posição real (em pixels) da célula-alvo — a transição CSS cuida da
   animação de deslizar de uma célula pra outra, sem precisar de rAF/JS por
   frame. `font-size` é sempre definido inline por positionToken() (game.js),
   proporcional ao tamanho REAL da célula — uma % em CSS aqui calcularia em
   cima do font-size herdado do <body>, não do tamanho da célula, e o token
   nasceria sempre do mesmo tamanho minúsculo em qualquer fase. */
.token{
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  transition: transform .12s ease-out;
  will-change: transform;
}

/* Modo 'head' da ovelha (ver SHEEP_HEAD_SVG em game.js) — `<svg>` é
   inline por padrão e ganha uns pixels extras de espaço embaixo (reservado
   pra "descender" de texto); display:block tira essa folga fantasma, que
   senão desalinhava o ícone um pouco pra cima do centro real da célula. */
.token svg{ display: block; }

.token-sheep{ z-index: 2; }

/* MÓDULO DE LOBOS: única regra CSS específica de lobo do projeto — seguro
   apagar esta linha (só ela) se os lobos forem removidos do jogo (ver
   README, "Como remover os lobos"); nada mais aqui depende dela. */
.token-wolf{ z-index: 1; opacity: .92; }

/* Flash de "colisão" no token da ovelha — anima `filter`, não `transform`,
   de propósito: `transform` já é usado (inline, por game.js) pra
   posicionar o token via translate(); animar a MESMA propriedade por CSS
   entraria em conflito e faria o token pular pra origem durante o flash. */
.token-sheep.hit{
  animation: letmaze-hit-flash .3s ease;
}

@keyframes letmaze-hit-flash{
  0%, 100%{ filter: none; }
  50%{ filter: drop-shadow(0 0 5px var(--red-ink)) brightness(1.35); }
}

.modal-card.modal-card-howto{
  width: min(360px, 92%);
  max-width: 360px;
  max-height: 82vh;
  overflow-y: auto;
  text-align: left;
  padding: 20px 22px;
}
.howto-body p{ margin: 0 0 10px; font-size: 14px; color: var(--modal-ink); line-height: 1.5; }
.howto-section{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--modal-accent);
  margin: 16px 0 8px;
  font-weight: 600;
}
.howto-section:first-child{ margin-top: 0; }
.howto-list{ margin: 0 0 10px; padding-left: 18px; font-size: 14px; color: var(--modal-ink); line-height: 1.5; }
.howto-list li{ margin-bottom: 4px; }

.stat-accent{
  position: relative;
  overflow: hidden;
}
.stat-accent::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent-ink);
}

.stat-row .stat-row-btn{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#btn-give-up.disabled{
  opacity: .4;
  pointer-events: none;
}

/* Eventos no log lateral (ver #event-log em game.js) — reaproveita as
   mesmas classes visuais de #word-log do Letris/Letrix (bônus/repetido),
   mas com semântica própria: 'good' = fase concluída, 'bad' = esbarrão em
   lobo ou desistência. */
#event-log{ list-style: none; margin: 0; padding: 0; font-family: var(--font-type); font-size: 13px; }
#event-log li{ padding: 4px 0; border-bottom: 1px dashed var(--log-divider); }
#event-log li.good{ color: var(--accent-ink); font-weight: 600; }
#event-log li.bad{ color: var(--red-ink); }

.modal-actions{ flex-wrap: wrap; }

/* Tela estreita: FASE/PONTUAÇÃO (.top-stats) sobem pra cima do labirinto e
   dividem a mesma linha, metade da largura cada — ver index.php pra
   confirmar que isso é só reposicionamento via grid-template-areas,
   nenhum elemento novo/duplicado. */
@media (max-width: 620px){
  .layout{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "topstats"
      "board"
      "side";
  }
  /* scroll-margin-top: usado pelo scrollIntoView() do toque no labirinto
     (ver game.js) — folga acima do bloco em vez de colar na borda da
     viewport (mesmo padrão do #next-letter-stat do Letris). */
  .top-stats{
    flex-direction: row;
    gap: 10px;
    scroll-margin-top: 8px;
  }
  .top-stats .stat{
    flex: 1;
    min-width: 0;
  }
  .top-stats .stat-row{
    flex: 2;
    gap: 10px;
  }
}