/* ===== DesProfessor — estilos ===== */
:root {
  --bg1: #4c1d95;
  --bg2: #7c3aed;
  --card: #ffffff;
  --ink: #2d2440;
  --ink-soft: #6b6280;
  --sun: #ffca3a;
  --grass: #8ac926;
  --sky: #1982c4;
  --coral: #ff595e;
  --orange: #ff924c;
  --purple: #6a4c93;
  --gem: #38d9a9;
  --radius: 22px;
  --shadow: 0 8px 24px rgba(30, 10, 70, .25);
  font-size: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  background: linear-gradient(160deg, var(--bg1), var(--bg2) 55%, #2563eb);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100dvh;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; }
input, select { font-family: inherit; }

#app { max-width: 860px; margin: 0 auto; padding: 12px 14px 90px; position: relative; }

/* ===== animações ===== */
@keyframes pop-in { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes slide-up { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wiggle { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bounce-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes shake-x { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes float-soft { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes gem-fly { 0% { transform: translateY(0) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-70px) scale(1.15); opacity: 0; } }
@keyframes confetti-fall { 0% { transform: translateY(-10vh) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: .7; } }
@keyframes steam-up { 0% { transform: translateY(0); opacity: .9; } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes glow-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,202,58,.65); } 50% { box-shadow: 0 0 0 14px rgba(255,202,58,0); } }

.pop-in { animation: pop-in .45s cubic-bezier(.2,1.4,.4,1) both; }
.slide-up { animation: slide-up .4s ease both; }
.shake { animation: shake-x .5s ease; }
.wiggle { animation: wiggle .7s ease infinite; }

/* ===== topo ===== */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; color: #fff;
}
.topbar .logo { font-family: 'Baloo 2'; font-weight: 800; font-size: 1.35rem; text-shadow: 0 2px 0 rgba(0,0,0,.25); letter-spacing: .5px; }
.topbar .spacer { flex: 1; }

.gem-pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.35);
  border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 1.05rem;
  color: #b7ffe8; backdrop-filter: blur(4px);
}
.gem-pill .gem-ico { font-size: 1.2rem; filter: drop-shadow(0 0 6px rgba(56,217,169,.8)); }
.gem-pill.bump { animation: pop-in .4s ease; }

.avatar-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--sun); color: var(--ink);
  font-weight: 800; font-size: 1.1rem; border: 3px solid #fff;
  display: grid; place-items: center; box-shadow: var(--shadow);
}

.icon-btn {
  background: rgba(255,255,255,.16); color: #fff; border: 2px solid rgba(255,255,255,.35);
  border-radius: 14px; padding: 8px 12px; font-weight: 600; font-size: .95rem;
}

/* ===== login ===== */
.login-wrap { min-height: 92dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.login-hero { text-align: center; color: #fff; }
.login-hero h1 { font-family: 'Baloo 2'; font-size: clamp(2rem, 7vw, 3rem); font-weight: 800; text-shadow: 0 3px 0 rgba(0,0,0,.3); }
.login-hero p { opacity: .9; font-size: 1.05rem; }
.login-hero .prof { width: min(190px, 45vw); margin: 0 auto; animation: float-soft 3.4s ease-in-out infinite; }

.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; width: 100%; max-width: 380px;
}
.card label { display: block; font-weight: 600; margin: 10px 0 4px; color: var(--ink-soft); font-size: .95rem; }
.card input, .card select {
  width: 100%; padding: 13px 14px; border-radius: 14px; border: 2.5px solid #e5e0f0;
  font-size: 1.05rem; outline: none; transition: border-color .15s; background: #faf9ff;
}
.card input:focus { border-color: var(--bg2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 16px; padding: 14px 22px; font-size: 1.1rem; font-weight: 700;
  color: #fff; background: var(--grass); box-shadow: 0 5px 0 #61951b;
  transition: transform .08s, box-shadow .08s; user-select: none;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #61951b; }
.btn.full { width: 100%; margin-top: 16px; }
.btn.blue { background: var(--sky); box-shadow: 0 5px 0 #12608f; }
.btn.blue:active { box-shadow: 0 1px 0 #12608f; }
.btn.sun { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 #d1a112; }
.btn.sun:active { box-shadow: 0 1px 0 #d1a112; }
.btn.coral { background: var(--coral); box-shadow: 0 5px 0 #c2383c; }
.btn.coral:active { box-shadow: 0 1px 0 #c2383c; }
.btn.ghost { background: #efeaff; color: var(--bg2); box-shadow: 0 5px 0 #cfc2f5; }
.btn.ghost:active { box-shadow: 0 1px 0 #cfc2f5; }
.btn.small { padding: 9px 14px; font-size: .95rem; border-radius: 12px; }
.btn:disabled { opacity: .5; pointer-events: none; }

.login-error { color: var(--coral); font-weight: 600; margin-top: 10px; text-align: center; display: none; }
.login-error.show { display: block; animation: shake-x .5s; }

/* ===== home / mapa ===== */
.hello-banner {
  background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.3);
  color: #fff; border-radius: var(--radius); padding: 14px 18px;
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px; backdrop-filter: blur(4px);
}
.hello-banner .prof { width: 74px; flex-shrink: 0; animation: float-soft 3.4s ease-in-out infinite; }
.hello-banner .bubble { font-size: 1rem; line-height: 1.35; }
.hello-banner .bubble b { color: var(--sun); }

.subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }

.subject-card {
  border-radius: var(--radius); padding: 16px 14px; color: #fff; text-align: left;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
  transition: transform .12s; border: 3px solid rgba(255,255,255,.35);
}
.subject-card:active { transform: scale(.96); }
.subject-card .emoji { font-size: 2.2rem; display: block; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.subject-card h3 { font-family: 'Baloo 2'; font-size: 1.06rem; font-weight: 800; margin-top: 6px; line-height: 1.15; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.subject-card .progress-dots { display: flex; gap: 5px; margin-top: 9px; }
.subject-card .dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.35); }
.subject-card .dot.done { background: var(--sun); box-shadow: 0 0 6px var(--sun); }

/* ===== lista de atividades ===== */
.screen-head { display: flex; align-items: center; gap: 10px; color: #fff; margin: 8px 0 16px; }
.screen-head h2 { font-family: 'Baloo 2'; font-size: 1.5rem; font-weight: 800; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.back-btn { background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.35); color: #fff; border-radius: 12px; padding: 8px 13px; font-size: 1.1rem; font-weight: 700; }

.activity-list { display: flex; flex-direction: column; gap: 12px; }
.activity-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  transition: transform .12s; border: 3px solid transparent;
}
.activity-card:active { transform: scale(.98); }
.activity-card.done { border-color: var(--gem); }
.activity-card .who { width: 74px; flex-shrink: 0; }
.activity-card .info { flex: 1; min-width: 0; }
.activity-card h4 { font-family: 'Baloo 2'; font-size: 1.1rem; font-weight: 800; }
.activity-card .meta { color: var(--ink-soft); font-size: .9rem; margin-top: 3px; }
.activity-card .stars { font-size: 1.05rem; letter-spacing: 2px; }
.activity-card .go { font-size: 1.6rem; }

/* ===== lição (slides) ===== */
.lesson-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px 20px; text-align: center; max-width: 560px; margin: 0 auto;
}
.lesson-card .visual { font-size: clamp(3rem, 13vw, 4.6rem); line-height: 1.25; margin: 10px 0 14px; animation: bounce-y 2.4s ease-in-out infinite; }
.lesson-card h3 { font-family: 'Baloo 2'; font-size: 1.4rem; font-weight: 800; color: var(--bg2); }
.lesson-card p { font-size: 1.12rem; line-height: 1.5; margin-top: 10px; color: var(--ink); }
.lesson-card p b { color: var(--coral); }
.lesson-dots { display: flex; justify-content: center; gap: 7px; margin: 16px 0 4px; }
.lesson-dots .dot { width: 10px; height: 10px; border-radius: 50%; background: #ddd6f3; }
.lesson-dots .dot.on { background: var(--bg2); transform: scale(1.25); }

.coach-row { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin-bottom: 10px; }
.coach-row .who { width: 92px; animation: float-soft 3s ease-in-out infinite; }
.coach-bubble {
  background: #fff; border-radius: 18px 18px 18px 4px; padding: 12px 15px;
  box-shadow: var(--shadow); font-size: 1rem; max-width: 300px; line-height: 1.35;
}
.coach-bubble b { color: var(--sky); }

/* ===== desafio ===== */
.quiz-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.quiz-bar { flex: 1; height: 16px; background: rgba(255,255,255,.25); border-radius: 999px; overflow: hidden; border: 2px solid rgba(255,255,255,.35); }
.quiz-bar .fill { height: 100%; background: linear-gradient(90deg, var(--sun), var(--grass)); border-radius: 999px; transition: width .4s cubic-bezier(.2,1,.4,1); }
.quiz-count { color: #fff; font-weight: 700; font-size: .95rem; white-space: nowrap; }
.quit-x { background: rgba(255,255,255,.18); color: #fff; border-radius: 50%; width: 34px; height: 34px; font-size: 1rem; font-weight: 700; border: 2px solid rgba(255,255,255,.35); }

.stage { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-bottom: 8px; min-height: 110px; }
.stage .prof-box { width: 104px; flex-shrink: 0; position: relative; }
.stage .prof-box .steam { position: absolute; top: -4px; left: 50%; font-size: 1.3rem; animation: steam-up 1s ease-out infinite; display: none; }
.stage .prof-box.mad .steam { display: block; }
.stage .prof-box.mad { animation: shake-x .5s ease; }
.stage .prof-box.glad { animation: bounce-y .55s ease 2; }
.prof-say {
  background: #fff; border-radius: 4px 18px 18px 18px; padding: 11px 14px; margin-top: 8px;
  box-shadow: var(--shadow); font-size: .98rem; max-width: 330px; line-height: 1.3; min-height: 46px;
  align-self: center;
}

.question-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 18px; max-width: 560px; margin: 0 auto;
}
.question-card .big-visual { text-align: center; font-size: clamp(2.4rem, 10vw, 3.6rem); margin-bottom: 8px; }
.question-card h3 { font-family: 'Baloo 2'; font-size: 1.28rem; font-weight: 700; text-align: center; line-height: 1.35; }

.options { display: grid; gap: 10px; margin-top: 16px; }
.options.two-cols { grid-template-columns: 1fr 1fr; }
.opt {
  background: #f4f1ff; border: 3px solid #ded5f7; border-radius: 16px;
  padding: 14px 12px; font-size: 1.12rem; font-weight: 600; color: var(--ink);
  transition: transform .1s, background .15s, border-color .15s; text-align: center; line-height: 1.25;
}
.opt:active { transform: scale(.97); }
.opt.right { background: #e3fadc; border-color: var(--grass); color: #3d6d0e; animation: pop-in .35s; }
.opt.wrong { background: #ffe3e4; border-color: var(--coral); color: #a52a2e; animation: shake-x .45s; }
.opt.faded { opacity: .45; pointer-events: none; }
.opt:disabled { pointer-events: none; }

.hint-row { display: flex; justify-content: center; margin-top: 14px; }
.hint-box {
  display: none; margin-top: 12px; background: #fff8dd; border: 2.5px dashed var(--sun);
  border-radius: 14px; padding: 12px 14px; font-size: 1rem; line-height: 1.4;
}
.hint-box.show { display: block; animation: slide-up .3s ease; }

.calm-note {
  display: none; margin-top: 12px; background: #e7f4ff; border: 2.5px solid #a8d5f7;
  border-radius: 14px; padding: 12px 14px; font-size: 1rem; line-height: 1.45; color: #14548a;
}
.calm-note.show { display: block; animation: slide-up .35s ease; }
.explain-box {
  display: none; margin-top: 10px; background: #f0fbe9; border: 2.5px solid #bce49a;
  border-radius: 14px; padding: 12px 14px; font-size: 1.02rem; line-height: 1.45; color: #33590f;
}
.explain-box.show { display: block; animation: slide-up .35s ease; }
.explain-box .ex-visual { font-size: 1.9rem; text-align: center; margin-bottom: 6px; }

.next-row { display: flex; justify-content: center; margin-top: 16px; }

.retry-banner {
  background: var(--sun); color: var(--ink); border-radius: var(--radius); padding: 14px 18px;
  font-weight: 700; text-align: center; margin: 0 auto 12px; max-width: 560px; animation: pop-in .4s;
  box-shadow: var(--shadow); font-size: 1.05rem;
}

/* ===== resultado ===== */
.result-wrap { text-align: center; color: #fff; padding-top: 8px; }
.result-wrap .prof { width: min(180px, 44vw); margin: 6px auto; }
.result-wrap h2 { font-family: 'Baloo 2'; font-size: 1.7rem; font-weight: 800; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.result-stars { font-size: 2.6rem; letter-spacing: 6px; margin: 8px 0; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.result-card { background: var(--card); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; max-width: 420px; margin: 12px auto; }
.result-card .line { display: flex; justify-content: space-between; font-size: 1.08rem; padding: 7px 4px; font-weight: 600; }
.result-card .line b { color: var(--bg2); }
.gems-earned { font-size: 1.5rem; font-weight: 800; color: #0ca678; margin-top: 6px; animation: pop-in .5s .3s both; }

/* ===== admin ===== */
.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.admin-table th { background: var(--bg2); color: #fff; padding: 11px 10px; text-align: left; font-size: .92rem; }
.admin-table td { padding: 11px 10px; border-top: 1px solid #eee7fb; font-size: .98rem; }
.admin-table .tag { border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 700; }
.admin-table .tag.admin { background: #ffe3e4; color: #a52a2e; }
.admin-table .tag.aluno { background: #e3fadc; color: #3d6d0e; }
.admin-table .tag.professor { background: #efe6ff; color: #6a4c93; }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.modal-back { position: fixed; inset: 0; background: rgba(20,10,50,.55); display: grid; place-items: center; z-index: 60; padding: 16px; }
.modal-back .card { animation: pop-in .3s; }

/* ===== toast + confetti + gemas voando ===== */
#toast-zone { position: fixed; left: 0; right: 0; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 80; pointer-events: none; }
.toast { background: var(--ink); color: #fff; border-radius: 999px; padding: 11px 20px; font-weight: 600; box-shadow: var(--shadow); animation: slide-up .3s ease; font-size: 1rem; }

#confetti-zone { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetto { position: absolute; top: -4vh; width: 12px; height: 12px; border-radius: 3px; animation: confetti-fall linear both; }

.fly-gem { position: fixed; z-index: 75; font-size: 1.5rem; pointer-events: none; animation: gem-fly 1s ease-out both; }

/* ===== editor de lições ===== */
.ed-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 12px;
}
.ed-card label { display: block; font-weight: 600; margin: 10px 0 4px; color: var(--ink-soft); font-size: .92rem; }
.ed-card input[type="text"], .ed-card input:not([type]), .ed-card textarea, .ed-card select,
.ed-player-row select {
  width: 100%; padding: 11px 12px; border-radius: 12px; border: 2.5px solid #e5e0f0;
  font-size: 1rem; outline: none; background: #faf9ff; font-family: inherit;
}
.ed-card input:focus, .ed-card textarea:focus { border-color: var(--bg2); }
.ed-card textarea { resize: vertical; }
.ed-card-head { display: flex; justify-content: space-between; align-items: center; }
.ed-card-head b { font-family: 'Baloo 2'; color: var(--bg2); font-size: 1.05rem; }
.ed-section { font-family: 'Baloo 2'; color: #fff; margin: 18px 0 10px; font-size: 1.2rem; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.ed-opt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ed-opt-row input[type="radio"] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--grass); }
.ed-badge {
  display: inline-block; background: #fff3bf; color: #8a6d00; border-radius: 999px;
  padding: 2px 10px; font-size: .72rem; font-weight: 800; vertical-align: middle;
}
.ed-badge.nova { background: #d3f9d8; color: #2b8a3e; }
.ed-player-row { display: flex; align-items: center; gap: 12px; }
.ed-player-row .ed-player-view { width: 64px; flex-shrink: 0; }

/* ===== banners da home (etapa + álbum) ===== */
.series-banner, .album-banner {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px;
  border: 2px solid rgba(255,255,255,.35); color: #fff; backdrop-filter: blur(4px);
  background: rgba(255,255,255,.14); transition: transform .12s;
}
.series-banner:active, .album-banner:active { transform: scale(.98); }
.album-banner { background: linear-gradient(100deg, rgba(56,217,169,.28), rgba(255,202,58,.22)); }
.album-banner .ab-ico { font-size: 1.9rem; }
.sb-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-info b { font-family: 'Baloo 2'; font-size: 1.05rem; }
.sb-label { font-size: .78rem; opacity: .85; text-transform: uppercase; letter-spacing: .5px; }
.sb-tema { font-size: .88rem; opacity: .9; }
.sb-go { font-weight: 700; font-size: .95rem; background: rgba(255,255,255,.2); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }

/* ===== tela de etapas ===== */
.ano-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ano-chip {
  border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: .92rem;
  background: rgba(255,255,255,.14); color: rgba(255,255,255,.75); border: 2px solid rgba(255,255,255,.3);
}
.ano-chip.on { background: var(--sun); color: var(--ink); border-color: #fff; box-shadow: var(--shadow); }

.etapa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.etapa-card {
  border-radius: var(--radius); padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 4px;
  background: var(--card); box-shadow: var(--shadow); border: 3px solid transparent; transition: transform .12s;
}
.etapa-card b { font-family: 'Baloo 2'; font-size: 1.05rem; color: var(--ink); }
.etapa-card .et-num { font-size: .78rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; }
.etapa-card .et-tipo { font-weight: 700; font-size: .95rem; }
.etapa-card .et-tipo.prova { color: var(--coral); }
.etapa-card .et-tipo.teste { color: var(--sky); }
.etapa-card .et-status { font-size: .85rem; color: var(--ink-soft); margin-top: 4px; }
.etapa-card.ativa { border-color: var(--grass); animation: glow-pulse 2s infinite; }
.etapa-card.ativa .et-status { color: #3d6d0e; font-weight: 700; }
.etapa-card.ativa:active { transform: scale(.97); }
.etapa-card.locked { opacity: .55; filter: grayscale(.4); }

/* ===== álbum de figurinhas ===== */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.sticker-card {
  background: var(--card); border-radius: 16px; padding: 10px 8px 12px; text-align: center;
  box-shadow: var(--shadow); position: relative; border: 3px solid #e5e0f0; overflow: hidden;
}
.sticker-card .st-num { position: absolute; top: 6px; left: 8px; font-size: .72rem; font-weight: 800; color: var(--ink-soft); }
.sticker-card .st-rarity { font-size: .68rem; font-weight: 700; margin-top: 2px; color: var(--ink-soft); }
.sticker-card .st-art { width: 84px; margin: 4px auto 0; }
.sticker-card .st-name { font-family: 'Baloo 2'; font-weight: 800; font-size: .92rem; line-height: 1.1; margin-top: 4px; color: var(--ink); }
.sticker-card .st-country { font-size: .8rem; color: var(--ink-soft); margin-top: 2px; }
.sticker-card.lendaria { border-color: var(--sun); background: linear-gradient(160deg, #fff8dd, #fff); }
.sticker-card.lendaria::before {
  content: ''; position: absolute; inset: -60% auto auto -60%; width: 80%; height: 220%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,215,80,.5) 50%, transparent 60%);
  transform: rotate(20deg); animation: shine-sweep 2.8s ease-in-out infinite;
}
@keyframes shine-sweep { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.sticker-card.rara { border-color: var(--purple); background: linear-gradient(160deg, #f3edff, #fff); }
.sticker-card.unknown { background: #efeaf8; border-style: dashed; border-color: #c9bfe2; }
.sticker-card.unknown .st-mystery { font-size: 2.6rem; font-weight: 800; color: #b5a8d6; padding: 18px 0 8px; }
.sticker-card.unknown .st-name { color: #b5a8d6; }

/* ===== baú ===== */
.chest-wrap {
  display: block; width: min(210px, 55vw); margin: 10px auto 0; cursor: pointer;
  background: none; border: none; animation: chest-wiggle 1.6s ease-in-out infinite;
}
.chest-wrap.open { animation: none; }
@keyframes chest-wiggle { 0%,100% { transform: rotate(-2deg) scale(1); } 25% { transform: rotate(2deg) scale(1.03); } 50% { transform: rotate(-1deg) scale(1); } 75% { transform: rotate(1.5deg) scale(1.02); } }
.chest-cta { color: #fff; font-weight: 700; margin-top: 6px; font-size: 1.05rem; text-shadow: 0 2px 0 rgba(0,0,0,.3); animation: bounce-y 1.4s ease-in-out infinite; }

.reward-row { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 10px auto; flex-wrap: wrap; }
.reward-gem {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 2.6rem; filter: drop-shadow(0 0 12px rgba(56,217,169,.9));
}
.reward-gem span { font-size: 1rem; font-weight: 800; color: #b7ffe8; }
.reward-sticker { width: 150px; animation: pop-in .5s .25s both; }
.reward-sticker .sticker-card { transform: scale(1.04); }
.reward-new { font-weight: 800; color: var(--sun); margin-top: 8px; text-shadow: 0 2px 0 rgba(0,0,0,.35); animation: wiggle 1s ease infinite; }
.album-complete { background: var(--card); color: var(--ink); border-radius: 16px; padding: 16px; font-weight: 700; box-shadow: var(--shadow); }

/* ===== responsivo ===== */
@media (min-width: 700px) {
  :root { font-size: 17px; }
  .subject-grid { grid-template-columns: repeat(3, 1fr); }
  .stage .prof-box { width: 120px; }
}
@media (max-width: 380px) {
  .options.two-cols { grid-template-columns: 1fr; }
  .stage .prof-box { width: 88px; }
}