/* ===== Tokens ===== */
:root{
  --ground:#FBF1DD;
  --ground-2:#F3E4C3;
  --ink:#3A2A18;
  --ink-soft:#6B5643;
  --wood:#8A5A2E;
  --wood-dark:#6B3F1D;
  --paper:#FFFBF2;
  --olive:#5C7A3C;
  --olive-dark:#3E5A2B;
  --terracotta:#C1552C;
  --terracotta-dark:#8C3A1B;
  --indigo:#2E4A72;
  --indigo-dark:#1F3557;
  --gold:#E3A72F;
  --gold-dark:#A66E12;
  --ok:#3E8A4A;
  --bad:#C1392B;
  --shadow: 0 6px 0 rgba(58,42,24,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#241A10;
    --ground-2:#2E2116;
    --ink:#F3E7D6;
    --ink-soft:#CBB89E;
    --paper:#FFFBF2;
    --wood:#B57C42;
    --wood-dark:#8A5A2E;
  }
}
:root[data-theme="dark"]{
  --ground:#241A10;
  --ground-2:#2E2116;
  --ink:#F3E7D6;
  --ink-soft:#CBB89E;
  --paper:#FFFBF2;
  --wood:#B57C42;
  --wood-dark:#8A5A2E;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:"Nunito", ui-sans-serif, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  position:relative;
}
/* Camada de fundo em position:fixed (não background-attachment:fixed — isso não
   funciona direito em navegadores mobile, era por isso que o balanço não aparecia no
   celular). Um elemento fixed de verdade funciona igual em desktop e mobile. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(color-mix(in srgb, var(--ground) 60%, transparent), color-mix(in srgb, var(--ground) 78%, transparent)),
    url("img/fundo-grama.jpg") center 20% / cover no-repeat;
  animation: pan-fundo 50s ease-in-out infinite alternate;
}
@keyframes pan-fundo{ 0%{background-position:center 8%;} 100%{background-position:center 32%;} }
@media (prefers-reduced-motion: reduce){ body::before{animation:none;} }
h1,h2,h3,.mode-label,.dif-tile strong,.parabola-btn span,button{
  font-family:"Baloo 2","Nunito",ui-rounded,sans-serif;
}
h1,h2{text-wrap:balance;}
button{font:inherit; cursor:pointer;}
[hidden]{display:none!important;}

#app{
  max-width:920px;
  margin:0 auto;
  padding-inline:16px;
  padding-block:24px 48px;
}
@media (min-width:1024px){ #app{max-width:1080px; padding-block:36px 60px;} }

.view-home{position:relative; display:flex; flex-direction:column; min-height:calc(100svh - 72px);}

/* ===== Home (responsiva: celular / tablet / PC) ===== */
.home-hero{
  border-radius:18px; overflow:hidden; border:4px solid var(--wood-dark); box-shadow:var(--shadow);
  margin-bottom:14px; max-width:min(90vw, 480px); margin-inline:auto; flex-shrink:0;
}
.home-hero img{display:block; width:100%; height:auto;}
.home-header{text-align:center; margin-bottom:16px; flex-shrink:0;}
.home-header h1{
  font-size:clamp(1.5rem, 5vw, 2.1rem);
  font-weight:800; color:#fff; margin:0 0 6px;
  -webkit-text-stroke: 2px var(--wood-dark);
  paint-order: stroke fill;
  text-shadow:
    -2px -2px 0 var(--wood-dark), 2px -2px 0 var(--wood-dark),
    -2px 2px 0 var(--wood-dark), 2px 2px 0 var(--wood-dark),
    0 3px 4px rgba(0,0,0,.25);
}
.home-sub{
  color:#FF6A00; font-weight:800; margin:0; font-size:clamp(1rem,2.4vw,1.15rem);
  -webkit-text-stroke: 1.4px #fff;
  paint-order: stroke fill;
  text-shadow:
    -1.4px -1.4px 0 #fff, 1.4px -1.4px 0 #fff,
    -1.4px 1.4px 0 #fff, 1.4px 1.4px 0 #fff,
    0 2px 3px rgba(0,0,0,.2);
}

.mode-grid{
  display:flex; flex-direction:column; gap:clamp(14px,2vh,22px); flex:1;
}
.mode-tile{
  flex:1; min-height:132px;
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:5%;
  padding:10px 24px;
  border-radius:24px;
  border:4px solid var(--wood-dark);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tile-color) 90%, white), var(--tile-color));
  color:#fff;
  box-shadow: var(--shadow);
  position:relative;
  transition: transform .12s ease;
  overflow:hidden;
}
.mode-tile::before, .mode-tile::after{
  content:""; position:absolute; top:9px; width:8px; height:8px; border-radius:50%;
  background: rgba(255,255,255,.55);
}
.mode-tile::before{left:12px;}
.mode-tile::after{right:12px;}
.mode-tile:active{transform:translateY(3px); box-shadow:0 3px 0 rgba(58,42,24,.18);}
.mode-icon{
  width:clamp(92px, 25vw, 130px); height:clamp(92px, 25vw, 130px); flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.65);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), 0 3px 8px rgba(0,0,0,.12);
}
.mode-icon img{width:90%; height:90%; object-fit:contain;}
.mode-label{
  font-weight:800; font-size:clamp(1.55rem, 7.5vw, 2.1rem); line-height:1.05;
  text-shadow:0 2px 0 rgba(0,0,0,.14);
}
.mode-pintar{--tile-color:#FF5A36;}
.mode-quebra{--tile-color:#3FBF63;}
.mode-caca{--tile-color:#2E9BFF;}
.mode-quiz{--tile-color:#FFB300;}

/* Tablet: tudo um passo maior */
@media (min-width:600px){
  .home-hero{max-width:min(70vw, 560px);}
  .mode-tile{min-height:140px; padding:14px 32px;}
  .mode-icon{width:clamp(90px,14vw,130px); height:clamp(90px,14vw,130px);}
  .mode-label{font-size:clamp(1.6rem,4vw,2.1rem);}
}
/* PC: aproveita a largura maior do #app (1080px) sem esticar demais os ícones */
@media (min-width:1024px){
  .home-hero{max-width:640px;}
  .mode-tile{min-height:160px; padding:16px 44px;}
  .mode-icon{width:150px; height:150px;}
  .mode-label{font-size:2.3rem;}
}

/* ===== Sub header (shared) ===== */
.sub-header{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.sub-header h2{
  margin:0; font-size:1.4rem; font-weight:800; color:#fff;
  -webkit-text-stroke: 1.6px var(--wood-dark);
  paint-order: stroke fill;
  text-shadow:
    -1.6px -1.6px 0 var(--wood-dark), 1.6px -1.6px 0 var(--wood-dark),
    -1.6px 1.6px 0 var(--wood-dark), 1.6px 1.6px 0 var(--wood-dark),
    0 2px 3px rgba(0,0,0,.2);
}
.btn-back{
  background:var(--paper); color:var(--wood-dark); border:2px solid var(--wood-dark);
  border-radius:12px; padding:9px 16px; font-weight:800; box-shadow:var(--shadow);
}
.btn-back:active{transform:translateY(2px); box-shadow:0 2px 0 rgba(58,42,24,.18);}
.btn-exit{
  position:fixed; top:12px; right:12px; z-index:100;
  background:var(--terracotta-dark); color:#fff; border:2px solid var(--wood-dark);
  border-radius:12px; padding:9px 16px; font-weight:800; box-shadow:var(--shadow);
}
.btn-exit:active{transform:translateY(2px); box-shadow:0 2px 0 rgba(58,42,24,.18);}
.btn-primary{
  background:var(--olive); color:#fff; border:none; border-radius:14px;
  padding:12px 22px; font-weight:800; font-size:1.05rem; box-shadow:var(--shadow);
}
.btn-primary:active{transform:translateY(3px); box-shadow:none;}

/* ===== Picker (grade de 30 parábolas) ===== */
.picker-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
@media (min-width:520px){ .picker-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:760px){ .picker-grid{grid-template-columns:repeat(4,1fr);} }
.parabola-btn{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:16px; border:3px solid var(--wood-dark);
  background:var(--paper); box-shadow:var(--shadow); text-align:left;
}
.parabola-btn:active{transform:translateY(3px); box-shadow:none;}
.parabola-btn img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:var(--ground-2);}
.parabola-btn span{
  display:block; padding:8px 10px; font-weight:700; font-size:.82rem; line-height:1.2;
  color:var(--ink);
}

/* ===== Pintar: barra de ferramentas compacta (linha única) em cima, imagem grande embaixo ===== */
.pintar-layout{display:flex; flex-direction:column; gap:10px; align-items:center;}
.pintar-toolbar{
  display:flex; flex-wrap:nowrap; align-items:center; gap:8px;
  width:100%; max-width:760px; overflow-x:auto; padding:8px 10px;
  background:var(--paper); border:3px solid var(--wood-dark); border-radius:14px;
}
.palette{display:flex; gap:6px; flex-shrink:0;}
.swatch{
  width:clamp(24px,7vw,32px); height:clamp(24px,7vw,32px); flex-shrink:0; border-radius:50%;
  border:2px solid rgba(0,0,0,.25); box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.swatch[aria-pressed="true"]{outline:3px solid var(--wood-dark); outline-offset:2px;}
.tool-chip{
  display:flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0;
  background:#fff; border:2px solid var(--wood); border-radius:10px;
  padding:8px 12px; font-weight:700; color:var(--ink); font-size:.85rem; white-space:nowrap;
}
.eraser-btn[aria-pressed="true"]{background:var(--wood); color:#fff;}
.brush-size{display:flex; align-items:center; gap:6px; flex-shrink:0; padding-inline:4px; border-left:2px solid var(--ground-2); border-right:2px solid var(--ground-2);}
.brush-step{
  width:28px;height:28px;border-radius:50%; border:2px solid var(--wood-dark); flex-shrink:0;
  background:#fff; font-size:1.1rem; font-weight:800; color:var(--wood-dark); line-height:1;
}
.brush-dot{background:var(--ink); border-radius:50%; display:inline-block; flex-shrink:0;}

.canvas-wrap{
  position:relative; margin-inline:auto; touch-action:none;
  aspect-ratio:820/1157;
  height:min(74svh, calc(96vw * 1.411));
  max-width:96vw;
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow); border:4px solid var(--wood-dark); background:#fff;
}
.canvas-wrap canvas{position:absolute; inset:0; width:100%; height:100%;}

/* ===== Quebra-cabeça ===== */
.dif-grid{display:grid; grid-template-columns:1fr; gap:12px; max-width:420px;}
.dif-grid-4{grid-template-columns:repeat(2,1fr); max-width:460px;}
@media (min-width:480px){ .dif-grid:not(.dif-grid-4){grid-template-columns:repeat(3,1fr); max-width:none;} }
.dif-tile{
  display:flex; flex-direction:column; gap:4px; align-items:center;
  padding:20px 10px; border-radius:16px; border:3px solid var(--wood-dark);
  background:linear-gradient(180deg, color-mix(in srgb, var(--olive) 85%, white), var(--olive)); color:#fff;
  box-shadow:var(--shadow);
}
.dif-tile:active{transform:translateY(3px); box-shadow:none;}
.dif-tile strong{font-size:1.3rem;}
.dif-tile span{font-size:.85rem; opacity:.9;}

.quebra-layout{display:flex; flex-direction:column; gap:10px; align-items:center;}
.quebra-tray{
  display:flex; flex-wrap:wrap; gap:8px; width:100%; max-width:640px; justify-content:center;
  padding:8px; background:var(--paper); border-radius:14px; border:3px solid var(--wood);
  max-height:22svh; overflow-y:auto;
}
.quebra-board-wrap{
  position:relative; margin-inline:auto;
  aspect-ratio:760/1063;
  height:min(68svh, calc(94vw * 1.399));
  max-width:96vw;
  border:4px solid var(--wood-dark); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:#eee;
}
.quebra-board-wrap canvas{position:absolute; inset:0; width:100%; height:100%;}
.quebra-tray canvas{border-radius:6px; box-shadow:0 3px 6px rgba(0,0,0,.25); touch-action:none; cursor:grab;}
.piece-dragging{position:fixed !important; z-index:50; pointer-events:none; box-shadow:0 8px 16px rgba(0,0,0,.35) !important;}

/* ===== Caça-palavras ===== */
.caca-layout{
  display:flex; flex-direction:column; gap:16px; align-items:center; min-width:0;
  /* full-bleed: escapa do padding lateral do #app, sobrando só ~3mm (11px) de cada lado */
  width:100vw; margin-left:calc(-50vw + 50%); padding-inline:11px; box-sizing:border-box;
}
@media (min-width:760px){
  .caca-layout{
    flex-direction:row; align-items:flex-start; justify-content:center;
    width:100%; margin-left:0; padding-inline:0;
  }
  .caca-grid{order:1;}
  .caca-lista{order:2;}
}
.caca-grid{
  display:grid; gap:clamp(2px,.6vw,4px); background:var(--wood-dark);
  padding:clamp(6px,2vw,14px); border-radius:clamp(10px,2.4vw,16px); box-shadow:var(--shadow);
  touch-action:none; user-select:none;
  width:100%; min-width:0; max-width:100%; box-sizing:border-box;
}
@media (min-width:760px){ .caca-grid{ width:min(90vw,420px); } }
.caca-cell{
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); font-weight:800; color:var(--ink);
  font-size:clamp(.85rem, 3vw, 1.2rem); aspect-ratio:1; border-radius:clamp(3px,.8vw,6px);
}
.caca-cell.selected{background:color-mix(in srgb, var(--gold) 55%, var(--paper));}
.caca-cell.found{background:var(--olive); color:#fff;}
.caca-lista{display:flex; flex-wrap:wrap; gap:8px; max-width:320px; justify-content:center; align-content:flex-start;}
.caca-word{
  padding:6px 12px; border-radius:10px; border:2px solid var(--indigo); color:var(--indigo);
  font-weight:700; font-size:.85rem; background:var(--paper);
}
.caca-word.found{background:var(--olive); border-color:var(--olive-dark); color:#fff; text-decoration:line-through;}

/* ===== Perguntinhas ===== */
.quiz-stars{display:flex; gap:12px; justify-content:center; margin-bottom:18px; flex-wrap:wrap;}
.placar-item{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--paper); border:3px solid var(--wood-dark); border-radius:14px;
  padding:8px 22px; min-width:110px; box-shadow:var(--shadow);
}
.placar-recorde{border-color:var(--gold-dark); background:color-mix(in srgb, var(--gold) 18%, var(--paper));}
.placar-num{font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.4rem; color:var(--ink);}
.placar-rotulo{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
.quiz-card{
  max-width:560px; margin:0 auto; background:var(--paper); border:3px solid var(--wood-dark);
  border-radius:18px; padding:22px; box-shadow:var(--shadow);
}
.quiz-pergunta{font-size:clamp(1.15rem,4.2vw,1.45rem); font-weight:800; margin:0 0 18px; text-wrap:balance; color:var(--ink); line-height:1.3;}
.quiz-opcoes{display:grid; gap:12px;}
.quiz-opcao{
  text-align:left; padding:14px 18px; border-radius:12px; border:2px solid var(--indigo);
  background:#fff; color:#1F1608 !important; font-weight:700; font-size:clamp(1rem,3.6vw,1.2rem);
}
.quiz-opcao.correct{background:var(--ok); border-color:var(--ok); color:#fff;}
.quiz-opcao.wrong{background:var(--bad); border-color:var(--bad); color:#fff;}
.quiz-opcao:disabled{opacity:.75;}
.quiz-feedback{min-height:1.4em; font-weight:800; margin:12px 0 0;}
.quiz-feedback.ok{color:var(--ok);}
.quiz-feedback.bad{color:var(--bad);}
#quiz-proxima{margin-top:10px; width:100%;}

/* ===== Parabéns overlay ===== */
.parabens-overlay{
  position:fixed; inset:0; background:rgba(36,26,16,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:40;
}
.parabens-card{
  background:var(--paper); border:4px solid var(--wood-dark); border-radius:20px; padding:28px 24px; text-align:center; max-width:320px; box-shadow:var(--shadow);
}
.parabens-emoji{font-size:2.6rem; margin-bottom:8px;}
.parabens-card p{font-weight:800; font-size:1.15rem; margin:0 0 16px; color:var(--wood-dark);}