/* Savly геймификация — в стила на сайта (cream/brown карти, shadow-custom).
   Без gradient-text, без side-stripe, без bounce. Меко ease-out движение. */

:root {
  --gam-brown: var(--accent-brown, #6b4f3a);
  --gam-cream: var(--primary-cream, #fdf6ec);
  --gam-gold: #f0a824;
  --gam-green: var(--accent-green, #00d09e);
  --gam-ink: #3a3026;
}

/* ── Header chip (ниво · точки) ─────────────────────────────────────────────── */
.gam-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: var(--gam-cream);
  border: 1px solid rgba(107, 79, 58, .18);
  color: var(--gam-brown);
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease;
}
.gam-chip:hover { color: var(--gam-brown); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(107,79,58,.16); }
.gam-chip .gam-chip-star { font-size: .95rem; line-height: 1; }
.gam-chip .gam-chip-lvl { opacity: .65; font-weight: 600; }

/* ── Профил: прогрес карта ──────────────────────────────────────────────────── */
.gam-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gam-level-name { color: var(--gam-brown); font-weight: 800; margin: 0; }
.gam-points { color: var(--gam-brown); font-weight: 800; font-size: 1.35rem; line-height: 1; }
.gam-points small { font-weight: 600; opacity: .6; font-size: .6em; }

.gam-bar { height: 12px; border-radius: 999px; background: rgba(107,79,58,.12); overflow: hidden; margin: .75rem 0 .35rem; }
.gam-bar-fill { height: 100%; border-radius: 999px; background: var(--gam-green); transition: width .6s cubic-bezier(.22,1,.36,1); }
.gam-next { font-size: .82rem; color: var(--gam-ink); opacity: .7; }

.gam-streak {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .85rem; padding: .3rem .7rem; border-radius: 999px;
  background: #fff3e0; color: #c2410c; font-weight: 700; font-size: .82rem;
}

/* ── Медали ─────────────────────────────────────────────────────────────────── */
.gam-badges { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .35rem; }
.gam-badge {
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .7rem; border-radius: 12px;
  background: var(--gam-cream); border: 1px solid rgba(107,79,58,.16);
  min-width: 0;
}
.gam-badge .gam-badge-ic { font-size: 1.25rem; line-height: 1; filter: none; }
.gam-badge .gam-badge-tx { display: flex; flex-direction: column; line-height: 1.15; }
.gam-badge .gam-badge-nm { font-weight: 700; color: var(--gam-brown); font-size: .82rem; }
.gam-badge .gam-badge-sub { font-size: .7rem; color: var(--gam-ink); opacity: .6; }
.gam-badge.locked { background: #f4f4f5; border-color: #e4e4e7; }
.gam-badge.locked .gam-badge-ic { filter: grayscale(1); opacity: .45; }
.gam-badge.locked .gam-badge-nm { color: #71717a; }

/* ── Onboarding чеклист ─────────────────────────────────────────────────────── */
.gam-onb { position: relative; }
.gam-onb-dismiss {
  position: absolute; top: .6rem; right: .75rem; border: none; background: transparent;
  color: var(--gam-ink); opacity: .4; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .25rem;
}
.gam-onb-dismiss:hover { opacity: .8; }
.gam-onb-steps { list-style: none; margin: .6rem 0 0; padding: 0; }
.gam-step {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .25rem; text-decoration: none; color: var(--gam-ink);
  border-top: 1px solid rgba(107,79,58,.08);
}
.gam-step:first-child { border-top: none; }
.gam-step:hover { color: var(--gam-brown); }
.gam-step-check {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center; font-size: .9rem;
  background: rgba(107,79,58,.1); color: transparent;
}
.gam-step.done .gam-step-check { background: var(--gam-green); color: #fff; }
.gam-step-ic { font-size: 1.05rem; }
.gam-step-label { flex: 1 1 auto; font-weight: 600; }
.gam-step.done .gam-step-label { color: #9ca3af; text-decoration: line-through; text-decoration-thickness: 1px; }
.gam-step-go { color: var(--gam-brown); opacity: .5; font-size: 1rem; }
.gam-step.done .gam-step-go { visibility: hidden; }

/* ── Toasts ─────────────────────────────────────────────────────────────────── */
/* Долу-ЛЯВО: дясната страна е заета от баркод/списък FAB стека (mobile, z 99999).
   Вдигнато над "Какво е Savly" бутона (долу-ляво, bottom:16px, ~40px, z 99998).
   z-index най-отгоре, за да не се крие зад нищо. */
.gam-toast-wrap {
  position: fixed; left: 16px; right: auto;
  bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 100000;
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
  width: max-content; max-width: min(92vw, 360px); pointer-events: none;
}
.gam-toast {
  display: flex; align-items: center; gap: .6rem;
  background: #fff; color: var(--gam-ink);
  border: 1px solid rgba(107,79,58,.14); border-radius: 14px;
  padding: .65rem .9rem; box-shadow: 0 8px 26px rgba(58,48,38,.18);
  font-weight: 700; pointer-events: auto;
  animation: gamToastIn .4s cubic-bezier(.22,1,.36,1);
}
.gam-toast.gam-out { animation: gamToastOut .35s cubic-bezier(.4,0,1,1) forwards; }
.gam-toast .gam-toast-ic { font-size: 1.5rem; line-height: 1; }
.gam-toast .gam-toast-main { display: flex; flex-direction: column; line-height: 1.2; }
.gam-toast .gam-toast-pts { color: var(--gam-brown); font-size: 1.02rem; }
.gam-toast .gam-toast-sub { font-size: .76rem; font-weight: 600; opacity: .65; }
.gam-toast.badge { border-color: rgba(240,168,36,.5); background: #fffaf0; }
.gam-toast.levelup { border-color: var(--gam-green); background: #effdf8; }

@keyframes gamToastIn  { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes gamToastOut { to   { opacity: 0; transform: translateY(8px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  .gam-bar-fill, .gam-chip, .gam-toast { transition: none; animation: none; }
}