/* Paleta tirada das caricaturas da família:
   creme (barriga do dinossauro), verde (pijama do Niko),
   marrom (camiseta e barba), azul (jeans). */
:root {
  --bg: #f6efe2;
  --surface: #fffaf1;
  --surface-2: #f3e9d6;
  --surface-3: #eadcc2;
  --border: #e6d8bd;
  --text: #2b1d14;
  --muted: #7a6450;
  --faint: #a8937a;
  --green: #4e9a3f;
  --green-dark: #2f6b2a;
  --green-soft: #e3f0d6;
  --brown: #6b4a2f;
  --denim: #2f4a73;
  --denim-2: #3d6290;
  --on-accent: #ffffff;
  --danger: #c0392b;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(75, 50, 25, .06), 0 4px 14px rgba(75, 50, 25, .07);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

.screen { max-width: 720px; margin: 0 auto; min-height: 100dvh; }

/* ---------- Login ---------- */
#login { display: grid; place-items: center; padding: 24px; }
.login-box { text-align: center; max-width: 360px; }
.login-art { position: relative; display: inline-block; }
.login-family { width: 260px; max-width: 80vw; animation: pop-in .8s var(--ease-spring) both; filter: drop-shadow(0 18px 24px rgba(75,50,25,.18)); }
.login-cart { position: absolute; left: -46px; bottom: -6px; width: 110px; animation: roll-in 1s .35s var(--ease-spring) both; }
.login-box .kicker { margin: 18px 0 0; color: var(--green-dark); font-weight: 800; letter-spacing: .02em; animation: rise .6s .15s var(--ease-out) both; }
.login-box h1 { margin: 2px 0 6px; font-size: 32px; letter-spacing: -.02em; font-weight: 900; animation: rise .6s .2s var(--ease-out) both; }
.login-box p { color: var(--muted); margin: 0 0 24px; animation: rise .6s .25s var(--ease-out) both; }
.login-box .btn { animation: rise .6s .3s var(--ease-out) both; }
.error { color: var(--danger) !important; margin-top: 16px !important; }

/* ---------- Topo ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(246, 239, 226, .88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.brand img { width: 34px; height: 34px; border-radius: 50%; background: var(--green); flex: none; }
.brand span { font-weight: 900; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs {
  position: relative; display: flex; flex: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px;
}
.tab {
  position: relative; z-index: 1; border: 0; background: none;
  padding: 7px 13px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--muted);
  transition: color .3s;
}
.tab.active { color: var(--on-accent); }
.tab-indicator {
  position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 999px; background: var(--brown);
  transition: transform .4s var(--ease-spring), width .4s var(--ease-spring);
}
.user {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--surface); flex: none;
  background: var(--surface-3) center/cover no-repeat; font-weight: 800; font-size: 14px;
  box-shadow: var(--shadow); transition: transform .2s var(--ease-spring);
}
.user:active { transform: scale(.9); }

.banner {
  margin: 4px 16px 0; padding: 12px 14px; border-radius: 14px; font-size: 14px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}

main { padding: 4px 16px calc(110px + env(safe-area-inset-bottom)); }

/* ---------- Destaque com a família ---------- */
.hero {
  position: relative; margin: 8px 0 14px; padding: 20px 20px 18px; min-height: 172px;
  border-radius: 26px; color: #fff; overflow: hidden; cursor: pointer;
  background:
    url("img/doodles.svg") 0 0 / 140px 140px,
    radial-gradient(circle at 85% 120%, rgba(78,154,63,.55) 0 38%, transparent 39%),
    radial-gradient(circle at 105% -10%, rgba(255,255,255,.10) 0 30%, transparent 31%),
    linear-gradient(135deg, var(--denim) 0%, var(--denim-2) 100%);
  box-shadow: 0 10px 30px rgba(47, 74, 115, .28);
  animation: rise .6s var(--ease-out) both;
}
.hero-text { position: relative; z-index: 1; max-width: 58%; }
.hero-kicker { font-size: 13px; font-weight: 800; opacity: .8; letter-spacing: .02em; }
.hero h1 { margin: 2px 0 10px; font-size: 27px; line-height: 1.05; font-weight: 900; letter-spacing: -.02em; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-chip {
  font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(4px);
}
.hero-chip b { font-size: 14px; }
.hero-family {
  position: absolute; right: -8px; bottom: -14px; height: 178px; width: auto;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
  transform-origin: bottom center; animation: pop-in .9s .1s var(--ease-spring) both;
}
.hero.jump .hero-family { animation: jump .6s var(--ease-spring); }
.hero-cart {
  position: absolute; right: 128px; bottom: -4px; width: 92px; z-index: 1;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.25));
  animation: roll-in 1s .3s var(--ease-spring) both;
}
.hero.jump .hero-cart, .hero-cart.bump { animation: cart-bump .55s var(--ease-spring); }
@media (max-width: 380px) { .hero-cart { right: 118px; width: 80px; } }

/* ---------- Adicionar ---------- */
.add {
  display: flex; gap: 10px; position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 4;
  padding: 6px 0 12px; background: var(--bg);
}
.add-field { position: relative; flex: 1; }
.add input, .search {
  width: 100%; padding: 15px 18px; font-size: 17px; font-family: inherit; font-weight: 600;
  border: 2px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
  outline: none; transition: border-color .2s, box-shadow .3s;
}
.add input::placeholder, .search::placeholder { color: var(--faint); font-weight: 600; }
.add input:focus, .search:focus { border-color: var(--green); box-shadow: 0 0 0 5px rgba(78,154,63,.15); }

.btn {
  border: 2px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 12px 20px; font-weight: 800;
  transition: transform .2s var(--ease-spring), background .2s, opacity .2s;
}
.btn:active { transform: scale(.95); }
.btn.primary { background: var(--green); border-color: var(--green); color: var(--on-accent); box-shadow: 0 6px 16px rgba(78,154,63,.3); }
.add-btn {
  width: 56px; height: 56px; padding: 0; flex: none; border-radius: 50%;
  display: grid; place-items: center; border: 0; background: var(--green); color: var(--on-accent);
  box-shadow: 0 8px 18px rgba(78,154,63,.35);
  transition: transform .35s var(--ease-spring);
}
.add-btn svg { width: 26px; height: 26px; transition: transform .45s var(--ease-spring); }
.add-btn:active { transform: scale(.88); }
.add-btn.pop svg { transform: rotate(180deg); }

.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  box-shadow: 0 18px 50px rgba(75,50,25,.18);
  transform-origin: top center; animation: drop .22s var(--ease-out);
}
.suggestions li {
  display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 16px; cursor: pointer;
  font-weight: 700; animation: rise .25s var(--ease-out) both;
}
.suggestions li:nth-child(2) { animation-delay: .03s; }
.suggestions li:nth-child(3) { animation-delay: .06s; }
.suggestions li:nth-child(4) { animation-delay: .09s; }
.suggestions li:nth-child(5) { animation-delay: .12s; }
.suggestions li:nth-child(6) { animation-delay: .15s; }
.suggestions li.active, .suggestions li:hover { background: var(--green-soft); }
.suggestions .tag { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; align-self: center; }

/* ---------- Seções ---------- */
.section-head { display: flex; align-items: center; gap: 10px; margin: 18px 2px 12px; flex-wrap: wrap; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--brown); font-weight: 900; margin: 0; white-space: nowrap; }
.section-head small { font-size: 12px; color: var(--faint); font-weight: 600; }
.count {
  min-width: 26px; padding: 2px 9px; border-radius: 999px; text-align: center;
  background: var(--green); color: var(--on-accent); font-size: 12px; font-weight: 900;
}
.count:empty { display: none; }
.empty { color: var(--faint); font-size: 14px; text-align: center; padding: 22px 0; font-weight: 700; animation: rise .4s var(--ease-out); }
.empty-nico { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 20px; color: var(--muted); }
.empty-art { display: flex; align-items: flex-end; gap: 0; }
.empty-niko { height: 170px; animation: wobble 2.6s ease-in-out infinite; transform-origin: bottom center; }
.empty-cart { width: 120px; margin-left: -12px; margin-bottom: 2px; animation: roll-in 1s .2s var(--ease-spring) both; }
.empty-nico strong { font-size: 17px; color: var(--text); font-weight: 900; }

/* ---------- Grupos por categoria ---------- */
.groups { display: flex; flex-direction: column; gap: 18px; }
.group-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; }
.group-name { font-size: 14px; font-weight: 900; color: var(--brown); letter-spacing: -.01em; }
.group-count {
  font-size: 11.5px; font-weight: 900; color: var(--green-dark); background: var(--green-soft);
  padding: 1px 8px; border-radius: 999px;
}
.group-head::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--border); margin-left: 4px; }

/* ---------- Cards ---------- */
.cards {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (max-width: 380px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card {
  position: relative; min-height: 78px; padding: 13px 34px 11px 14px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden;
  transition: transform .25s var(--ease-spring), box-shadow .2s, border-color .2s;
}
.card:hover { border-color: #d6c4a3; box-shadow: 0 2px 4px rgba(75,50,25,.08), 0 10px 22px rgba(75,50,25,.1); }
.card:active { transform: scale(.95) rotate(-1deg); }
.card:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.card-name {
  font-weight: 800; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--faint); font-weight: 700; }
.card-meta:empty { display: none; }
.card-meta .face {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--surface-3) center/cover no-repeat; border: 1.5px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}
.card-remove {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: transparent; color: var(--faint); font-size: 18px; line-height: 1;
  display: grid; place-items: center; transition: background .2s, color .2s, transform .2s var(--ease-spring);
}
.card-remove:hover { background: var(--surface-2); color: var(--text); }
.card-remove:active { transform: scale(.85); }

/* Selo de "comprado" que aparece ao tocar */
.card-check {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--green); color: var(--on-accent); border-radius: inherit;
  opacity: 0; transform: scale(.4); pointer-events: none;
}
.card-check svg { width: 32px; height: 32px; }
.card-check path { stroke-dasharray: 30; stroke-dashoffset: 30; }
.card.buying { animation: buy .55s var(--ease-out) forwards; pointer-events: none; }
.card.buying .card-check { animation: check-in .3s var(--ease-spring) forwards; }
.card.buying .card-check path { animation: draw .3s .12s var(--ease-out) forwards; }
.card.leaving { animation: leave .3s var(--ease-out) forwards; pointer-events: none; }
.card.pulse { animation: pulse .7s var(--ease-out); border-color: var(--green); box-shadow: 0 0 0 4px rgba(78,154,63,.2); }

/* Comprados: mais apagados, tocar devolve para a lista */
.bought .card { background: transparent; border: 2px dashed var(--border); box-shadow: none; min-height: 64px; }
.bought .card-name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); text-decoration-thickness: 2px; font-weight: 700; }
.bought .card-undo {
  position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center;
}
.bought .card-undo svg { width: 13px; height: 13px; }

/* Etiqueta que voa até o carrinho */
.fly-chip {
  position: fixed; left: 0; top: 0; z-index: 41; pointer-events: none;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--green); color: #fff; font-weight: 900; font-size: 13px;
  box-shadow: 0 6px 16px rgba(78,154,63,.4);
}

/* Confete ao comprar */
.confetti { position: fixed; width: 9px; height: 9px; border-radius: 3px; pointer-events: none; z-index: 40; }

/* ---------- Histórico ---------- */
.search { margin: 8px 0 6px; }
.hint { color: var(--faint); font-size: 13px; font-weight: 700; text-align: center; margin: 8px 0 14px; }
.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.items:empty { display: none; }
.item {
  display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
  animation: rise .3s var(--ease-out) both;
}
.item-main { flex: 1; min-width: 0; }
.item-name { font-weight: 800; overflow-wrap: anywhere; }
.item-meta { font-size: 12px; color: var(--faint); font-weight: 600; }
.icon-btn {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  padding: 7px 12px; font-size: 13px; font-weight: 800; border-radius: 999px; flex: none;
  transition: transform .2s var(--ease-spring);
}
.icon-btn:active { transform: scale(.9); }
.icon-btn.danger { color: var(--danger); background: transparent; }

/* ---------- Diálogo ---------- */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 20; padding: 16px;
  display: grid; place-items: end center;
  background: rgba(43, 29, 20, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade .2s ease;
}
.dialog {
  width: 100%; max-width: 440px; padding: 22px; margin-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-radius: 28px; box-shadow: 0 20px 60px rgba(43,29,20,.3);
  animation: sheet .4s var(--ease-spring);
}
.dialog p { margin: 0 0 18px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.dialog-actions { display: flex; flex-direction: column; gap: 8px; }
.dialog-actions .btn { padding: 14px; }
.dialog-actions.chips { flex-direction: row; flex-wrap: wrap; }
.dialog-actions.chips .btn { padding: 10px 14px; font-size: 14px; animation: rise .3s var(--ease-out) both; }
.dialog-actions.chips .btn:nth-child(n+5) { animation-delay: .05s; }
.dialog-actions.chips .btn:nth-child(n+9) { animation-delay: .1s; }

/* ---------- Aviso ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 32px);
  padding: 12px 12px 12px 18px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-weight: 800; font-size: 15px;
  box-shadow: 0 14px 40px rgba(43,29,20,.35);
  transform: translateX(-50%); animation: toast-in .45s var(--ease-spring);
}
.toast-action {
  border: 0; background: var(--green); color: #fff; font-weight: 900; font-size: 14px;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
}

/* ---------- Animações ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes sheet { from { opacity: 0; transform: translateY(40px) scale(.96); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 30px) scale(.9); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(30px) scale(.85); } }
@keyframes jump {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-16px) scale(1.04, .97); }
  60% { transform: translateY(0) scale(.98, 1.03); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes roll-in {
  0% { opacity: 0; transform: translateX(-80px) rotate(-8deg); }
  60% { opacity: 1; transform: translateX(6px) rotate(3deg); }
  100% { transform: none; }
}
@keyframes cart-bump {
  0% { transform: none; }
  30% { transform: translateY(-10px) rotate(-6deg); }
  60% { transform: translateY(0) rotate(3deg); }
  100% { transform: none; }
}
@keyframes wobble {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg) translateY(-4px); }
}
@keyframes check-in { to { opacity: 1; transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes buy {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06) rotate(1deg); }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(.6); opacity: 0; }
}
@keyframes leave { to { transform: scale(.7) rotate(-4deg); opacity: 0; } }
@keyframes pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  60% { transform: scale(.97); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}