/* Letfit — encaixar formas. Por cima de shared/base.css + theme-infantil.
   Público: primeira infância, neurodivergentes, atraso motor. Por isso:
   peças grandes, cores calmas, nenhum feedback punitivo (sem vermelho, sem
   tremida) e movimento reduzido quando o aparelho pede. */

:root{
  /* Uma cor por peça da rodada (até 6 na tela). Saturadas o bastante pra
     separar bem as peças, sem néon. */
  --fit-c0:#4F8FCE;
  --fit-c1:#E8834A;
  --fit-c2:#3BAA83;
  --fit-c3:#D65C8A;
  --fit-c4:#8E6CC9;
  --fit-c5:#D9A92A;
  /* Espaço vazio: mesma silhueta num tom de "buraco" sobre o tabuleiro —
     à noite, mais claro que o fundo (escuro sobre escuro some). Cores
     OPACAS de propósito: um SVG pode ter partes sobrepostas (copa e aba do
     chapéu), e uma cor translúcida escureceria cada sobreposição. Valores =
     --canvas-bg do tema infantil misturado com 14% (normal) / 25% (perto). */
  --fit-slot: #43374A;
  --fit-slot-near: #5D5260;
  --fit-board: var(--canvas-bg);
}
:root.day-mode{
  --fit-slot: #E1D3C0;
  --fit-slot-near: #CCBEB1;
}
/* Cartões (letra → transporte...): o desenho dentro do espaço vazio, num
   tom acima do "buraco" — dá pra ver a figura sem ela parecer uma peça. */
:root{ --fit-slot-tinta: #7C6F83; }
:root.day-mode{ --fit-slot-tinta: #9F8B74; }
:root:not(.day-mode){
  --fit-c0:#6AA8E6;
  --fit-c1:#F29A62;
  --fit-c2:#52C29A;
  --fit-c3:#E77BA3;
  --fit-c4:#A88AE0;
  --fit-c5:#E8BE47;
}

/* Tablet deitado é o uso principal: mais largura que os outros jogos. */
#app{ max-width:1100px; }

.fit-layout{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.fit-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:28px;
}
.fit-progress-label{
  font-family:var(--font-type);
  font-size:18px;
  color:var(--accent-ink);
}
/* Nome do dicionário no rótulo: abre a tela inicial. Parece link, mas com
   área de toque de botão. */
.fit-dic-link{
  font:inherit;
  color:inherit;
  background:none;
  border:none;
  padding:6px 2px;
  margin:-6px 0;
  text-decoration:underline dotted;
  text-underline-offset:4px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.fit-dic-link:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:2px; border-radius:4px; }
.fit-dots{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.fit-dots i{
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid var(--accent-ink);
  opacity:.55;
  transition:background .3s ease, opacity .3s ease;
}
.fit-dots i.on{
  background:var(--accent-ink);
  opacity:1;
}

.board-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  min-height:260px;
}

.fit-board{
  position:relative;
  background:var(--fit-board);
  border:2px solid var(--border);
  border-radius:18px;
  box-shadow:var(--card-shadow);
  overflow:hidden;
  /* Contexto de empilhamento próprio: o z-index das peças (que sobe a cada
     arrasto) fica contido aqui e nunca passa por cima dos modais. */
  isolation:isolate;
  /* O tabuleiro é todo área de arrasto: nada de rolar a página, dar zoom,
     selecionar texto ou abrir o menu de toque longo no meio do gesto. */
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}

.fit-divider{
  position:absolute;
  left:4%;
  right:4%;
  top:50%;
  border-top:2px dashed var(--line);
  opacity:.7;
  pointer-events:none;
}

.fit-slot,
.fit-piece{
  position:absolute;
  left:0;
  top:0;
  will-change:transform;
}
.fit-slot > svg,
.fit-rot > svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  /* O alvo do toque é a caixa inteira (div), não só o desenho: forma fina
     (lápis, colher) continua fácil de pegar. */
  pointer-events:none;
}

.fit-slot{
  color:var(--fit-slot);
  transition:color .2s ease;
}
.fit-slot > svg{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.4)) drop-shadow(0 -1px 1px rgba(0,0,0,.18));
  transition:filter .2s ease;
}
/* Peça por cima de um espaço, dentro da folga do encaixe: o espaço
   "acende" — sinal de que dá pra soltar. Neutro: não diz se é o certo. */
.fit-slot.near{ color:var(--fit-slot-near); }
.fit-slot.near > svg{
  filter:drop-shadow(0 0 6px var(--accent-ink)) drop-shadow(0 0 2px var(--accent-ink));
}

.fit-piece{
  cursor:grab;
  z-index:5;
}
/* Caixa que gira: forma + alça juntas, em torno do centro (= pivô (50,50)
   do viewBox, ver shapes/README.md). O .fit-piece só se desloca. */
.fit-rot{
  position:absolute;
  inset:0;
}
.fit-rot.snapping{
  transition:transform .3s cubic-bezier(.25,.8,.35,1);
}
.fit-rot > svg{
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.18));
  transition:transform .15s ease, filter .15s ease;
}
.fit-piece.dragging{ cursor:grabbing; }
.fit-piece.dragging .fit-rot > svg{
  transform:scale(1.08);
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.22));
}
/* Volta pra bandeja / entra no espaço: deslize suave, nunca um salto. */
.fit-piece.returning{
  transition:transform .4s cubic-bezier(.25,.8,.35,1);
}
.fit-piece.placed{
  cursor:default;
  z-index:2;
}
.fit-piece.placed .fit-rot > svg{
  filter:none;
  animation:fit-pop .35s ease-out;
}

.fit-color-0{ color:var(--fit-c0); }
.fit-color-1{ color:var(--fit-c1); }
.fit-color-2{ color:var(--fit-c2); }
.fit-color-3{ color:var(--fit-c3); }
.fit-color-4{ color:var(--fit-c4); }
.fit-color-5{ color:var(--fit-c5); }

/* Alça de rotação: bolinha com seta circular no canto de cima à direita
   da peça (canto costuma estar vazio). Gira junto com a peça. Nunca menor
   que 44px — alvo de toque confortável pra dedo pequeno ou caneta. */
.fit-handle{
  position:absolute;
  left:92%;
  top:8%;
  width:max(44px, 22%);
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:var(--accent-ink);
  color:#fff;
  border:3px solid var(--fit-board);
  box-shadow:0 2px 5px rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
  z-index:1;
}
.fit-handle svg{
  width:58%;
  height:58%;
  pointer-events:none;
}
.fit-piece.rotating .fit-handle{
  cursor:grabbing;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent-ink) 30%, transparent), 0 2px 5px rgba(0,0,0,.25);
}
.fit-piece.placed .fit-handle{ display:none; }
/* Forma certa, mas torta: a alça pulsa devagar — "gire aqui". */
.fit-handle.hint{ animation:fit-hint 1.2s ease-in-out 2; }

/* Rodada completa: todas as peças dão um pulinho juntas. */
.fit-board.round-done .fit-rot > svg{
  animation:fit-cheer .8s ease-in-out;
}
.fit-board.round-enter .fit-slot,
.fit-board.round-enter .fit-piece{
  animation:fit-fade-in .35s ease-out;
}

@keyframes fit-pop{
  0%{ transform:scale(1.12); }
  100%{ transform:scale(1); }
}
@keyframes fit-cheer{
  0%, 100%{ transform:translateY(0) scale(1); }
  35%{ transform:translateY(-6%) scale(1.06); }
  65%{ transform:translateY(0) scale(1); }
}
/* ---------- cartões (dicionário no modo 'cartao') ---------- */

/* Desenho dentro do cartão: branco na peça colorida; à noite as cores das
   peças são claras, então o desenho fica escuro. No espaço, tom próprio. */
.fit-tinta{ color:#fff; }
.fit-color-5 .fit-tinta,
:root:not(.day-mode) .fit-piece .fit-tinta{ color:#2B1E3D; }
.fit-slot .fit-tinta{ color:var(--fit-slot-tinta); }

/* Cartão encaixado vira uma etiqueta embaixo do espaço, deixando a figura
   à vista: a criança vê o "A" junto do avião. Embaixo e não no canto: no
   canto, cobriria uma das bolinhas das quantidades. */
.fit-board.cartao .fit-piece.placed .fit-rot > svg{
  transform:translate(0, 44%) scale(.34);
  transition:transform .35s cubic-bezier(.25,.8,.35,1);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));
  animation:none;
}
/* Rodada completa: cartão e espaço pulam juntos. Anima as propriedades
   translate/scale (não transform) pra não desfazer o selo nem a posição. */
.fit-board.cartao.round-done .fit-rot > svg{ animation:none; }
.fit-board.cartao.round-done .fit-slot > svg,
.fit-board.cartao.round-done .fit-nome,
.fit-board.cartao.round-done .fit-rot{
  animation:fit-cheer-cartao .8s ease-in-out;
}
/* Nome do espaço (dicionário com nome_no_encaixe, ex.: Transportes): selo
   na cor da peça, centrado na borda de cima do cartão — metade no respiro
   acima dele, metade na faixa vazia do cartão antes do desenho (o desenho
   começa a 17%, ver letfit_svg_cartao()). Uma linha só; nome comprido
   (.longo, ex.: "Camión de bomberos") usa letra menor. */
.fit-nome{
  position:absolute;
  left:50%;
  top:6%;
  transform:translate(-50%, -50%);
  padding:.12em .6em;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  font-size:clamp(11px, calc(var(--fit-tam, 120px) * .12), 24px);
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  pointer-events:none;
  animation:fit-nome-in .35s ease-out;
}
.fit-nome.longo{ font-size:clamp(10px, calc(var(--fit-tam, 120px) * .085), 18px); }
/* Texto: mesma regra do desenho dentro do cartão (.fit-tinta) — branco na
   cor da peça; escuro à noite (cores claras) e no amarelo. */
.fit-nome > span{ color:#fff; }
.fit-nome.fit-color-5 > span,
:root:not(.day-mode) .fit-nome > span{ color:#2B1E3D; }
@keyframes fit-nome-in{
  from{ opacity:0; scale:.6; }
  to{ opacity:1; scale:1; }
}

/* falar_ao_tocar: o espaço é tocável (fala o nome) — mãozinha no mouse e
   um pulinho na figura a cada toque, pra criança ligar o som à imagem. */
.fit-board.fala-toque .fit-slot{ cursor:pointer; }
.fit-slot.tocado > svg{ animation:fit-toque .35s ease-out; }
@keyframes fit-toque{
  0%, 100%{ scale:1; }
  40%{ scale:1.06; }
}

@keyframes fit-cheer-cartao{
  0%, 100%{ translate:0 0; scale:1; }
  35%{ translate:0 -6%; scale:1.06; }
  65%{ translate:0 0; scale:1; }
}

@keyframes fit-hint{
  0%, 100%{ box-shadow:0 2px 5px rgba(0,0,0,.25); }
  50%{ box-shadow:0 0 0 10px color-mix(in srgb, var(--accent-ink) 35%, transparent), 0 2px 5px rgba(0,0,0,.25); }
}
@keyframes fit-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* Modais sobre o tabuleiro: mesmo arredondado e um véu mais leve que o
   padrão dos outros jogos — tela calma, sem "apagão". */
.board-wrap > .modal{
  border-radius:18px;
  background:rgba(43,30,61,.55);
}

/* Tela inicial com a escolha do dicionário: mais larga que os outros
   modais, e rola se o tabuleiro for baixo (celular deitado). */
.board-wrap > .modal{ overflow:auto; padding:12px; }
.modal-card.modal-card-start{
  max-width:min(600px, 94vw);
  margin:auto;
}
.fit-dics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:0 0 16px;
  text-align:left;
}
.fit-dic{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:72px;
  padding:10px 12px;
  border:2px solid color-mix(in srgb, var(--modal-muted) 40%, transparent);
  border-radius:12px;
  background:transparent;
  color:var(--modal-ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.fit-dic[aria-checked="true"]{
  border-color:var(--modal-accent);
  background:color-mix(in srgb, var(--modal-accent) 16%, transparent);
  box-shadow:0 0 0 2px var(--modal-accent) inset;
}
.fit-dic:focus-visible{ outline:3px solid var(--modal-accent); outline-offset:2px; }
.fit-dic-icone{
  flex:0 0 48px;
  width:48px;
  height:48px;
  color:var(--fit-c0);
}
.fit-dic-icone svg{ display:block; width:100%; height:100%; }
.fit-dic-texto{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fit-dic-nome{ font-weight:700; font-size:16px; line-height:1.2; }
.fit-dic-desc{ font-size:12px; line-height:1.3; color:var(--modal-muted); }
/* Celular (em pé ou deitado): o tabuleiro é mais baixo que a tela inicial,
   e por cima dele ela virava uma caixa com barra de rolagem própria. Aqui a
   tela inicial sai de cima do tabuleiro e entra no fluxo da página (o
   tabuleiro some enquanto ela está aberta) — se não couber, rola a página. */
@media (max-width: 520px), (max-height: 560px){
  .board-wrap > #start-modal{
    position:static;
    width:100%;
    overflow:visible;
    padding:0;
    background:none;
  }
  .board-wrap > #start-modal .modal-card-start{ max-width:600px; width:100%; }
  .board-wrap:has(> #start-modal:not(.hidden)) > .fit-board{ display:none; }
}
@media (max-width: 520px){
  /* Celular em pé: uma coluna, sem a descrição, pra "Jogar" caber sem rolar. */
  .fit-dics{ grid-template-columns:1fr; gap:8px; }
  .fit-dic{ min-height:52px; padding:6px 10px; }
  .fit-dic-icone{ flex-basis:36px; width:36px; height:36px; }
  .fit-dic-desc{ display:none; }
}

/* Botões dos modais: alvo grande pra dedo pequeno. */
.btn-big{
  min-height:52px;
  font-size:20px;
  padding:10px 28px;
  border-radius:10px;
}
.fit-level-up{
  font-size:15px;
  color:var(--modal-accent);
  font-weight:700;
}

@media (max-width: 720px){
  body{ padding:12px 10px; }
  .fit-progress-label{ font-size:15px; }
  .fit-dots i{ width:11px; height:11px; }
}

@media (prefers-reduced-motion: reduce){
  .fit-piece.returning,
  .fit-rot.snapping{ transition:none; }
  .fit-rot > svg,
  .fit-slot,
  .fit-slot > svg{ transition:none; }
  .fit-handle.hint,
  .fit-piece.placed .fit-rot > svg,
  .fit-board.round-done .fit-rot > svg,
  .fit-board.cartao.round-done .fit-slot > svg,
  .fit-board.cartao.round-done .fit-nome,
  .fit-board.cartao.round-done .fit-rot,
  .fit-nome,
  .fit-slot.tocado > svg,
  .fit-board.round-enter .fit-slot,
  .fit-board.round-enter .fit-piece{ animation:none; }
  .fit-board.cartao .fit-piece.placed .fit-rot > svg{ transition:none; }
}