/* Pixel Puzzle — estilos. Lousa verde, giz, bandeja de madeira, botões "de brinquedo". */
:root{
  --board:#2B5E4E; --board-deep:#1E463A; --board-light:#3A7561;
  --chalk:#FFF6E5; --chalk-dim:rgba(255,246,229,.6); --ink:#2E2A24;
  --mustard:#F5B841; --mustard-ink:#3A2A08; --tomato:#E4572E; --sky:#4DA3D6; --leaf:#6BB24A; --gold:#F2C14E;
  --wood:#C58B4A; --wood-light:#D9A86A; --wood-deep:#8F5F2E;
  --font:'Fredoka','Nunito','Arial Rounded MT Bold',system-ui,sans-serif;
  --emoji:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;
  --pad-t:max(14px,env(safe-area-inset-top)); --pad-r:max(20px,env(safe-area-inset-right));
  --pad-b:max(14px,env(safe-area-inset-bottom)); --pad-l:max(20px,env(safe-area-inset-left));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  overflow:hidden;color:var(--chalk);font-family:var(--font);
  background:radial-gradient(ellipse at 50% 20%,var(--board-light) 0%,var(--board) 55%,var(--board-deep) 100%);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:4px solid var(--mustard);outline-offset:3px}
img,canvas,svg{display:block}
#app{height:100%;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;min-height:0;padding:var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l)}
.screen.scroll{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;align-items:center}
.hidden{display:none!important}
.emoji{font-family:var(--emoji)}

/* ---------- Cabeçalhos ---------- */
.head{width:100%;max-width:1100px;display:flex;align-items:center;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;flex:none}
.head-left,.head-right{display:flex;align-items:center;gap:14px;min-width:0}
.brand{font-size:15px;font-weight:600;color:var(--chalk-dim);letter-spacing:.02em}
h1{font-size:clamp(26px,4.2vw,44px);font-weight:700;line-height:1.05;margin-top:2px}
.levels{display:flex;gap:4px;background:rgba(0,0,0,.2);padding:5px;border-radius:999px}
.lvl{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:6px 8px 7px;border-radius:999px;font-size:11px;font-weight:600;color:var(--chalk-dim);line-height:1;transition:background .15s,color .15s}
.lvl .ic{font-size:26px;line-height:1.1;font-family:var(--emoji)}
.lvl.on{background:var(--mustard);color:var(--mustard-ink)}
.lvl:disabled{opacity:.35;cursor:default}
.levels.locked .lvl:not(.on){display:none}

/* ---------- Cards (temas, figuras, álbum) ---------- */
.cards{
  width:100%;max-width:1100px;margin-top:20px;padding:10px 6px 30px;flex:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;align-content:start;
}
.cards.themes{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px}
.card{
  position:relative;border-radius:22px;overflow:hidden;background:var(--chalk);color:var(--ink);text-align:center;
  display:flex;flex-direction:column;box-shadow:0 7px 0 rgba(0,0,0,.28);transition:transform .1s,box-shadow .1s;
}
.card:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.card img,.card canvas{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#dfe7e2}
.card .name{padding:9px 10px 12px;font-weight:600;font-size:17px;line-height:1.15}
.card.theme .name{font-size:22px;padding:12px 10px 16px}
.card.theme .theme-ic{position:absolute;left:10px;top:10px;font-size:34px;font-family:var(--emoji);filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}
.card.theme .theme-count{position:absolute;right:10px;top:10px;background:rgba(0,0,0,.55);color:#fff;font-weight:600;font-size:14px;padding:4px 10px;border-radius:999px}
.card.theme .theme-count.full{background:var(--gold);color:var(--mustard-ink)}
.card .badge{
  position:absolute;right:8px;top:8px;width:38px;height:38px;border-radius:50%;background:var(--gold);
  display:grid;place-items:center;font-size:22px;font-family:var(--emoji);box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.card.photo,.card.action{
  background:rgba(0,0,0,.18);color:var(--chalk);border:3px dashed var(--chalk-dim);box-shadow:none;
  align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:18px;min-height:170px;padding:14px;
}
.card.photo svg,.card.action svg{width:48px;height:48px}
.card.photo:active,.card.action:active{transform:scale(.97);box-shadow:none}

/* ---------- Botões redondos ---------- */
.rbtn{width:56px;height:56px;flex:none;border-radius:50%;border:3px solid var(--chalk);display:grid;place-items:center;color:var(--chalk);transition:transform .1s,background .15s,opacity .15s;background:rgba(0,0,0,.12)}
.rbtn svg{width:26px;height:26px}
.rbtn:active{transform:scale(.92)}
.rbtn.on{background:var(--mustard);border-color:var(--mustard);color:var(--mustard-ink)}
.rbtn.dim{opacity:.45}

/* ---------- Jogar ---------- */
#screen-play{padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.bar{display:flex;align-items:center;gap:10px;height:64px;flex:none}
.prog{flex:1;display:flex;align-items:center;gap:12px;min-width:80px;padding:0 6px;font-weight:600;font-size:20px;font-variant-numeric:tabular-nums}
.prog .track{flex:1;height:14px;border-radius:999px;background:rgba(0,0,0,.28);overflow:hidden}
.prog .fill{height:100%;width:0;border-radius:999px;background:var(--leaf);transition:width .3s}
#stage{
  flex:1;position:relative;min-height:0;touch-action:none;padding-top:10px;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;
}
@media (orientation:portrait){
  #stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.35fr) minmax(0,1fr)}
}
#board-area,#tray-area{position:relative;min-width:0;min-height:0}
#board{
  position:absolute;display:grid;border:8px solid var(--chalk);border-radius:10px;
  background:rgba(0,0,0,.28);box-shadow:0 10px 0 rgba(0,0,0,.28);transition:box-shadow .3s,border-color .3s;
}
#board.done{border-color:var(--gold);box-shadow:0 10px 0 rgba(0,0,0,.28),0 0 0 8px rgba(242,193,78,.35)}
.cell{border:1px dashed rgba(255,246,229,.28);transition:background .1s}
.cell.hover{background:rgba(245,184,65,.4)}
#board.done .cell{border-color:transparent}
#ghost{position:absolute;inset:0;background-size:100% 100%;opacity:0;pointer-events:none;transition:opacity .25s}
#board.hint #ghost{opacity:.32}
#tray{
  position:absolute;inset:0;border-radius:18px;
  background:repeating-linear-gradient(90deg,var(--wood) 0 64px,var(--wood-light) 64px 66px);
  box-shadow:inset 0 6px 0 rgba(255,255,255,.18),inset 0 -8px 0 var(--wood-deep),0 8px 0 rgba(0,0,0,.25);
}
.tile{
  position:absolute;left:0;top:0;width:var(--ts);height:var(--ts);background-repeat:no-repeat;
  border-radius:6px;box-shadow:0 5px 0 rgba(0,0,0,.32),0 0 0 3px var(--chalk);
  will-change:transform;transform-origin:center;cursor:grab;
}
.tile.settle{transition:transform .26s cubic-bezier(.2,.9,.3,1.15),box-shadow .2s,border-radius .2s}
.tile.drag{cursor:grabbing;box-shadow:0 16px 0 rgba(0,0,0,.28),0 0 0 3px var(--chalk)}
.tile.wrong{box-shadow:0 5px 0 rgba(0,0,0,.32),0 0 0 4px var(--tomato)}
.tile.locked{border-radius:0;box-shadow:none;pointer-events:none;cursor:default}

/* ---------- Overlays (comemoração, modo pais) ---------- */
.overlay{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:rgba(30,70,58,.7);overflow-y:auto}
.win-card{background:var(--chalk);color:var(--ink);border-radius:30px;padding:22px 26px 22px;text-align:center;box-shadow:0 12px 0 rgba(0,0,0,.32);width:100%;max-width:min(94vw,600px);position:relative}
.frame{display:inline-block;padding:10px;background:linear-gradient(135deg,#F9D976,#C9962B 45%,#F6DC8A 60%,#B7841E);border-radius:10px;box-shadow:0 8px 0 rgba(0,0,0,.18);transform:rotate(-2.5deg);margin-bottom:12px}
.frame img{width:min(44vw,210px);aspect-ratio:1/1;border:6px solid #fff;border-radius:4px;background:#dfe7e2}
.win-card h2{font-size:clamp(32px,6vw,52px);font-weight:700;line-height:1;color:var(--tomato)}
.win-name{margin-top:8px;font-size:clamp(22px,4vw,30px);font-weight:700}
.win-fact{margin:8px auto 16px;font-size:18px;color:#6E6353;max-width:46ch;line-height:1.35;min-height:1.35em}
.win-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.sticker-new{
  position:absolute;right:-6px;top:18px;transform:rotate(8deg);background:var(--gold);color:var(--mustard-ink);
  font-weight:700;font-size:16px;padding:8px 14px;border-radius:999px;box-shadow:0 5px 0 rgba(0,0,0,.2);
  display:flex;align-items:center;gap:8px;animation:pop .5s cubic-bezier(.2,.9,.3,1.4) both;
}
.sticker-new .lvl-ic{font-size:24px;font-family:var(--emoji)}
@keyframes pop{from{transform:rotate(8deg) scale(0)}to{transform:rotate(8deg) scale(1)}}
.big{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;margin:5px;border-radius:999px;font-weight:700;font-size:20px;box-shadow:0 6px 0 rgba(0,0,0,.25);transition:transform .1s,box-shadow .1s;min-height:56px}
.big svg{width:24px;height:24px}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.big.yellow{background:var(--mustard);color:var(--mustard-ink)}
.big.blue{background:var(--sky);color:#fff}
.big.green{background:var(--leaf);color:#fff}
.big.red{background:var(--tomato);color:#fff}
.big.small{font-size:17px;padding:12px 18px}

/* ---------- Modo pais ---------- */
.panel{background:var(--chalk);color:var(--ink);border-radius:26px;padding:22px 24px;width:100%;max-width:520px;box-shadow:0 12px 0 rgba(0,0,0,.32);display:flex;flex-direction:column;gap:12px}
.panel h2{font-size:30px;color:var(--board)}
.muted{font-size:14px;color:#6E6353;line-height:1.35}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:18px;font-weight:600;min-height:44px}
.row.col{flex-direction:column;align-items:flex-start}
.row.actions{flex-wrap:wrap;justify-content:flex-start;gap:0}
.switch{appearance:none;-webkit-appearance:none;width:64px;height:36px;border-radius:999px;background:#C9C1B3;position:relative;cursor:pointer;flex:none;transition:background .15s}
.switch::after{content:'';position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.2);transition:left .15s}
.switch:checked{background:var(--leaf)}
.switch:checked::after{left:32px}
.lock-levels{display:flex;flex-wrap:wrap;gap:6px}
.lock-levels .lvl{color:#6E6353;background:rgba(0,0,0,.06)}
.lock-levels .lvl.on{background:var(--mustard);color:var(--mustard-ink)}
#parents-hotspot{position:fixed;top:0;right:0;width:96px;height:96px;z-index:1900;touch-action:none}
#parents-hotspot .ring{
  position:absolute;right:16px;top:max(16px,env(safe-area-inset-top));width:44px;height:44px;border-radius:50%;
  border:4px solid transparent;border-top-color:var(--chalk);opacity:0;transition:opacity .2s;
}
#parents-hotspot.pressing .ring{opacity:.9;animation:spin 3s linear}
@keyframes spin{to{transform:rotate(1080deg)}}

/* ---------- Álbum ---------- */
.album-total{font-size:18px;font-weight:600;color:var(--chalk-dim)}
#album-pages{width:100%;max-width:1100px;padding:10px 6px 30px}
.album-page{margin-top:22px}
.album-page h2{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:700}
.album-page h2 .emoji{font-size:32px}
.album-page .seal{margin-left:auto;background:var(--gold);color:var(--mustard-ink);font-size:15px;font-weight:700;padding:6px 14px;border-radius:999px;box-shadow:0 4px 0 rgba(0,0,0,.25);transform:rotate(-4deg)}
.album-page .progress{font-size:15px;font-weight:600;color:var(--chalk-dim);margin-left:8px}
.stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;margin-top:12px}
.sticker{position:relative;border-radius:16px;overflow:hidden;background:var(--chalk);box-shadow:0 5px 0 rgba(0,0,0,.25)}
.sticker img{width:100%;aspect-ratio:1/1;object-fit:cover}
.sticker.missing{background:rgba(0,0,0,.25);box-shadow:none;border:3px dashed var(--chalk-dim)}
.sticker.missing img{filter:grayscale(1) brightness(.5) contrast(.8) opacity(.45)}
.sticker .name{display:block;padding:6px 6px 8px;font-size:14px;font-weight:600;color:var(--ink);text-align:center}
.sticker.missing .name{color:var(--chalk-dim)}
.sticker .badge{position:absolute;right:6px;top:6px;width:34px;height:34px;border-radius:50%;background:var(--gold);display:grid;place-items:center;font-size:20px;font-family:var(--emoji);box-shadow:0 3px 0 rgba(0,0,0,.25)}

/* ---------- Diversos ---------- */
#confetti{position:fixed;inset:0;z-index:2100;pointer-events:none}
.toast{
  position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:2200;
  background:var(--chalk);color:var(--ink);padding:12px 20px;border-radius:999px;font-weight:600;font-size:17px;
  box-shadow:0 6px 0 rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}