/* Valores da Família — componentes base (Tailwind cuida do resto) */
:root {
  --bg: #f5f5f7;
  --card: #ffffff;
  --card-border: rgba(15, 23, 42, .06);
  --muted: #64748b;
  --field: #f1f5f9;
  --ganho: #10b981;
  --ajuste: #f59e0b;
  -webkit-tap-highlight-color: transparent;
}
.dark {
  --bg: #0b0b0f;
  --card: #16161c;
  --card-border: rgba(255, 255, 255, .06);
  --muted: #94a3b8;
  --field: rgba(255, 255, 255, .06);
  color-scheme: dark;
}
html, body { background: var(--bg); }
body { overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; }
button, a, label { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .08);
}
.dark .card { box-shadow: none; }

.label { font-size: .8rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }

.input {
  width: 100%;
  background: var(--field);
  border: 2px solid transparent;
  border-radius: 1rem;
  padding: .85rem 1rem;
  outline: none;
  transition: border-color .15s, background .15s;
  font-size: 16px; /* evita zoom no iOS */
}
.input:focus { border-color: #6366f1; background: var(--card); }
textarea.input { resize: vertical; min-height: 5rem; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-weight: 700; border-radius: 1rem; padding: .8rem 1.25rem;
  box-shadow: 0 8px 20px -8px rgba(99, 102, 241, .6);
  transition: transform .12s, filter .12s;
}
.btn-primary:active { transform: scale(.97); }
.btn-primary:disabled { filter: grayscale(.8); opacity: .5; box-shadow: none; }
.btn-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--field); font-weight: 600; border-radius: .9rem; padding: .65rem 1rem;
  transition: transform .12s;
}
.btn-soft:active { transform: scale(.96); }

.pressable { transition: transform .12s ease, box-shadow .12s ease; }
.pressable:active { transform: scale(.96); }

/* barras de progresso com brilho */
.bar { height: .85rem; border-radius: 999px; background: var(--field); overflow: hidden; }
.bar > span {
  display: block; height: 100%; border-radius: inherit;
  background-size: 200% 100%;
  animation: shimmer 2.8s linear infinite;
  transition: width .8s cubic-bezier(.2, .8, .2, 1);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* feedback */
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.pop { animation: pop .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.rise { animation: rise .35s ease both; }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.wiggle { animation: wiggle .5s ease 2; }

.toast {
  pointer-events: auto;
  max-width: min(92vw, 28rem);
  background: rgba(17, 24, 39, .92); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 1rem; padding: .8rem 1rem; font-weight: 600;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .4);
  display: flex; align-items: center; gap: .75rem;
  animation: rise .25s ease both;
}
.dark .toast { background: rgba(255, 255, 255, .95); color: #111827; }
.toast button { color: #a5b4fc; font-weight: 700; white-space: nowrap; }
.dark .toast button { color: #4f46e5; }

/* folha inferior (modal estilo iOS) */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 60; opacity: 0; transition: opacity .2s; }
.sheet-backdrop.on { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  max-height: 92vh; overflow-y: auto;
  background: var(--card); border-radius: 1.75rem 1.75rem 0 0;
  padding: .75rem 1.25rem calc(env(safe-area-inset-bottom) + 1.25rem);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.sheet.on { transform: none; }
.sheet::before { content: ""; display: block; width: 2.5rem; height: 5px; border-radius: 9px; background: var(--field); margin: 0 auto .75rem; }
@media (min-width: 768px) {
  .sheet { left: 50%; right: auto; bottom: 50%; width: 32rem; border-radius: 1.75rem; transform: translate(-50%, 60%) scale(.96); opacity: 0; transition: transform .25s, opacity .2s; padding-bottom: 1.5rem; }
  .sheet.on { transform: translate(-50%, 50%); opacity: 1; }
  .sheet::before { display: none; }
}

/* teclado do PIN */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.keypad button {
  height: 4.25rem; border-radius: 1.25rem; background: var(--field);
  font-size: 1.75rem; font-weight: 600; transition: transform .1s, background .1s;
}
.keypad button:active { transform: scale(.92); background: rgba(99, 102, 241, .2); }
.pin-dots span { width: 1rem; height: 1rem; border-radius: 99px; border: 2px solid var(--muted); transition: all .15s; }
.pin-dots span.on { background: #6366f1; border-color: #6366f1; transform: scale(1.15); }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* barra de abas inferior */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--card-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.dark .tabbar { background: rgba(22, 22, 28, .82); }
.tabbar button { color: var(--muted); }
.tabbar button.on { color: #4f46e5; }
.dark .tabbar button.on { color: #a5b4fc; }
.tabbar .badge, .badge-dot {
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 99px;
  background: #ef4444; color: #fff; font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.safe-top { padding-top: calc(env(safe-area-inset-top) + .5rem); }
.pb-tabbar { padding-bottom: calc(env(safe-area-inset-bottom) + 6rem); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* segmentado estilo iOS */
.seg { display: flex; background: var(--field); border-radius: .9rem; padding: .25rem; gap: .25rem; }
.seg button { flex: 1; padding: .55rem .4rem; border-radius: .7rem; font-weight: 600; font-size: .9rem; color: var(--muted); transition: all .15s; white-space: nowrap; }
.seg button.on { background: var(--card); color: inherit; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }

[hidden] { display: none !important; }

/* itens de grade não podem ser esticados por textos longos (evita rolagem lateral no celular) */
.grid > * { min-width: 0; }

/* reações que "voam" sobre o tabuleiro */
@keyframes voar {
  0%   { transform: translate(-50%, 0) scale(.4); opacity: 0; }
  15%  { transform: translate(-50%, -20px) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -48vh) scale(1); opacity: 0; }
}
.reacao-voa { position: absolute; bottom: 18vh; font-size: 4.5rem; animation: voar 2.2s ease-out forwards; }

/* ===================== Maia (mascote) ===================== */
.maia * { transform-box: fill-box; }
.maia-rabo { transform-origin: 0% 100%; animation: abanar 1.1s ease-in-out infinite alternate; }
.maia-feliz .maia-rabo { animation-duration: .28s; }
.maia-triste .maia-rabo, .maia-dormindo .maia-rabo { animation: none; transform: rotate(18deg); }
.maia-olhos { transform-origin: center; animation: piscar 4.5s infinite; }
.maia-feliz { animation: pulinho 1.6s ease-in-out infinite; }
.maia-dormindo .maia-cabeca { transform-origin: 50% 90%; transform: rotate(-8deg) translateY(4px); }
.maia-dormindo .maia-corpo { animation: respirar 3s ease-in-out infinite; transform-origin: center bottom; }
.maia-triste .maia-cabeca { transform-origin: 50% 90%; transform: rotate(5deg) translateY(3px); }
.maia-zzz text { animation: zzz 2.4s ease-in-out infinite; }
.maia-zzz text:nth-child(2) { animation-delay: .4s; } .maia-zzz text:nth-child(3) { animation-delay: .8s; }
.maia-lagrima { animation: lagrima 2.2s ease-in infinite; }
.maia-lingua { transform-origin: top center; animation: lingua .6s ease-in-out infinite alternate; }
@keyframes abanar { from { transform: rotate(-14deg); } to { transform: rotate(18deg); } }
@keyframes piscar { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes pulinho { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes respirar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.04); } }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -8px); } }
@keyframes lagrima { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@keyframes lingua { from { transform: scaleY(.85); } to { transform: scaleY(1.1); } }
.maia-pula { animation: maiaPula .6s ease-out 2 !important; }
@keyframes maiaPula { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-28px) rotate(-4deg); } }
.voa-item { position: absolute; pointer-events: none; animation: voaItem 1.6s ease-out forwards; }
@keyframes voaItem { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -120px) scale(1.2); } }

/* ===================== Personagem (avatar evolutivo) ===================== */
.avatar-acessorio { position: absolute; top: -18%; left: 50%; transform: translateX(-50%) rotate(-8deg); line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.avatar-efeito { position: absolute; inset: -12%; pointer-events: none; }
.avatar-efeito i { position: absolute; font-style: normal; animation: efeito 2.6s ease-in-out infinite; }
.avatar-efeito i:nth-child(1) { top: 0; left: 4%; } .avatar-efeito i:nth-child(2) { top: 18%; right: 0; animation-delay: .9s; } .avatar-efeito i:nth-child(3) { bottom: 6%; left: 10%; animation-delay: 1.7s; }
@keyframes efeito { 0%, 100% { opacity: .2; transform: scale(.6) translateY(4px); } 50% { opacity: 1; transform: scale(1.1) translateY(-4px); } }
.mold-ouro { box-shadow: 0 0 0 4px #fbbf24, 0 0 0 7px #fde68a, 0 4px 14px rgba(251,191,36,.6); }
.mold-fogo { box-shadow: 0 0 0 4px #f97316, 0 0 18px 4px rgba(249,115,22,.7); animation: fogoMold 1.2s ease-in-out infinite alternate; }
.mold-arco { box-shadow: 0 0 0 4px #fff; background-image: conic-gradient(#ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444) !important; }
.mold-diamante { box-shadow: 0 0 0 4px #67e8f9, 0 0 0 7px #e0f2fe, 0 0 20px rgba(103,232,249,.8); }
.mold-neon { box-shadow: 0 0 0 3px #f0abfc, 0 0 16px 4px #d946ef; animation: fogoMold 1.6s ease-in-out infinite alternate; }
@keyframes fogoMold { from { filter: brightness(1); } to { filter: brightness(1.25); } }

/* medalhas */
.medalha-bloq { filter: grayscale(1); opacity: .35; }
.medalha-nova { animation: pop .5s ease both, brilhoMedalha 1.5s ease-in-out 3; }
@keyframes brilhoMedalha { 50% { box-shadow: 0 0 0 6px rgba(251,191,36,.45); } }