/* ==========================================================================
   Jogo de pintar — 2 a 4 anos
   Regras nao negociaveis desta folha:
   - zero texto na interface (so icone)
   - alvo de toque nunca abaixo de 64px; desfazer nunca abaixo de 88px
   - NADA de `fill` em #camada-regioes: atributo de apresentacao SVG perde
     para CSS, e o balde escreve em el.style.fill (inline vence tudo)
   ========================================================================== */

:root{
  --bg:#fdfbf7;
  --barra:#ffffff;
  --borda:#e2ddd3;
  --sel:#1e88e5;
  --sombra:0 2px 6px rgba(0,0,0,.10);
  --alvo:64px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}

html,body{
  margin:0; height:100%; overflow:hidden;
  background:var(--bg);
  font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none;
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}

.tela{
  position:fixed; inset:0;
  padding:max(.5rem,env(safe-area-inset-top)) max(.5rem,env(safe-area-inset-right))
          max(.5rem,env(safe-area-inset-bottom)) max(.5rem,env(safe-area-inset-left));
}
.oculto{display:none !important}

/* ===================== GALERIA ===================== */
#grade{
  height:100%; overflow-y:auto; overscroll-behavior:contain;
  display:grid; gap:.9rem; align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  padding:.4rem;
}
#grade button{
  border:3px solid var(--borda); border-radius:18px; background:#fff;
  padding:0; overflow:hidden; cursor:pointer; aspect-ratio:4/3;
  box-shadow:var(--sombra); transition:transform .12s;
}
#grade button:active{transform:scale(.95)}
#grade button.comecado{border-color:var(--sel)}
#grade img{width:100%; height:100%; object-fit:contain; display:block; pointer-events:none}

/* ===================== PINTURA ===================== */
#pintura{display:flex; gap:.5rem; align-items:stretch}

#barra{
  display:flex; flex-direction:column; gap:.45rem;
  align-items:center; justify-content:center; flex:0 0 auto;
}
#espessuras{display:flex; flex-direction:column; gap:.45rem}

.fer{
  width:var(--alvo); height:var(--alvo); flex:0 0 auto;
  border:3px solid var(--borda); border-radius:18px;
  background:var(--barra); box-shadow:var(--sombra);
  display:grid; place-items:center; cursor:pointer; padding:0;
  transition:transform .1s, border-color .1s;
}
.fer svg{width:60%; height:60%; fill:#3a3630}
.fer:active{transform:scale(.9)}
.fer.sel{border-color:var(--sel); background:#e8f2fd}
.fer.sel svg{fill:var(--sel)}
.fer.grande{width:88px; height:88px}   /* desfazer: o botao mais importante da tela */

#area{flex:1; min-width:0; min-height:0; display:grid; place-items:center}

#palco{
  position:relative;
  background:#fff; border-radius:14px; box-shadow:var(--sombra);
  touch-action:none;          /* sem scroll, sem pinca, sem duplo-toque-zoom */
  overflow:hidden;
}
#camada-regioes,#camada-contorno,#tela{position:absolute; inset:0; width:100%; height:100%}
#camada-regioes{z-index:0}
#tela           {z-index:1}
#camada-contorno{z-index:2; pointer-events:none}
#camada-regioes svg,#camada-contorno svg{width:100%; height:100%; display:block}

/* contorno: so linha, nunca coberto pelo pincel */
#camada-contorno :is(path,circle,rect,ellipse,polygon){
  fill:none !important; stroke:#1a1a1a; stroke-width:3;
  stroke-linejoin:round; stroke-linecap:round;
}
/* regioes: alvo de toque. SEM fill aqui — ver cabecalho do arquivo. */
#camada-regioes :is(path,circle,rect,ellipse,polygon){
  stroke:none; cursor:pointer;
}

/* ===================== PALETA ===================== */
#paleta{
  flex:0 0 auto; display:grid; gap:.4rem; align-content:center;
  grid-template-columns:repeat(2,var(--alvo));
}
#paleta button{
  width:var(--alvo); height:var(--alvo);
  border:4px solid var(--borda); border-radius:50%;
  padding:0; cursor:pointer; box-shadow:var(--sombra);
  transition:transform .1s, border-color .1s;
}
#paleta button:active{transform:scale(.9)}
#paleta button.sel{border-color:var(--sel); transform:scale(1.12)}
#paleta button.clara{border-color:#b9b3a8}
#paleta button.clara.sel{border-color:var(--sel)}

/* ===================== RETRATO ===================== */
@media (orientation:portrait){
  #pintura{flex-direction:column; gap:.4rem}
  #area{order:1}
  #barra{order:2; flex-direction:row; justify-content:center; flex-wrap:wrap}
  #espessuras{flex-direction:row}
  #paleta{order:3; grid-template-columns:repeat(8,minmax(0,1fr)); justify-items:center}
  #paleta button{width:min(var(--alvo),11vw); height:min(var(--alvo),11vw)}
}

/* telas curtas: encolhe alvo, mas nunca abaixo do minimo tocavel */
@media (max-height:520px){ :root{--alvo:52px} .fer.grande{width:66px; height:66px} }