/* ===== Bibi Play — design system estilo YouTube Kids ===== */
:root {
  --bibi-yellow: #F5B940;
  --bibi-red: #E63946;
  --bibi-blue: #4A8FD8;
  --green: #5BBF6B;
  --purple: #9B6BD8;
  --orange: #FF8A3D;
  --pink: #FF6FA5;
  --bg: #FFF9EF;
  --card: #ffffff;
  --ink: #3A3345;
  --ink-soft: #8B8398;
  --radius: 28px;
  --touch: 88px; /* alvo mínimo de toque p/ dedinhos */
  --shadow: 0 6px 0 rgba(58, 51, 69, 0.12);
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

button { font-family: inherit; color: inherit; border: none; background: none; cursor: pointer; }

#app { display: flex; flex-direction: column; height: 100%; height: 100dvh; }

/* ===== Header ===== */
.top-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: linear-gradient(180deg, #FFCE5C 0%, var(--bibi-yellow) 100%);
  box-shadow: 0 4px 0 rgba(58, 51, 69, 0.1);
  z-index: 5;
}
.top-bar .logo-char { width: 60px; height: 60px; filter: drop-shadow(0 3px 0 rgba(122, 74, 18, 0.3)); animation: logo-bob 3s ease-in-out infinite; }
@keyframes logo-bob { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
.top-bar h1 { font-size: 28px; margin: 0; letter-spacing: 0.5px; color: #7A4A12; }
.top-bar h1 span { color: var(--bibi-red); }
.top-bar .site-link {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, 0.65); color: #7A4A12;
  font-family: inherit; font-weight: 800; font-size: 15px;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 3px 0 rgba(122, 74, 18, 0.18);
}
.top-bar .site-link:active { transform: scale(0.95); }

/* ===== Conteúdo / abas ===== */
.tab-panels { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: pop-in 0.25s ease-out; }

@keyframes pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* ===== Cards de jogos ===== */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.game-card {
  position: relative;
  border-radius: var(--radius);
  padding: 20px 16px 18px;
  min-height: 230px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #fff;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease;
  overflow: hidden;
}
.game-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 18%, rgba(255,255,255,0.35), transparent 55%);
  pointer-events: none;
}
.game-card:active { transform: scale(0.94); }
.game-card .char {
  width: 130px; height: 130px;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,0.18));
  transition: transform 0.15s ease;
}
.game-card:active .char { transform: scale(1.08) rotate(-3deg); }
.game-card .emoji { font-size: 44px; position: absolute; top: 12px; right: 14px; transform: rotate(12deg); }
.game-card .lvl-badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,0.85); color: var(--ink);
  font-size: 15px; font-weight: 800;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
.game-card .title { font-size: 24px; font-weight: 700; text-shadow: 0 2px 0 rgba(0,0,0,0.18); text-align: center; line-height: 1.1; }

/* ===== Tela de jogo (overlay) ===== */
#game-screen {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
  display: none; flex-direction: column;
}
#game-screen.active { display: flex; }
#game-container { flex: 1; position: relative; overflow: hidden; }
.game-back-btn {
  position: absolute; top: 14px; left: 14px; z-index: 60;
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow);
  font-size: 30px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.game-back-btn:active { transform: scale(0.9); }

/* ===== Vídeos ===== */
.video-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px; max-width: 1100px; margin: 0 auto;
}
.video-card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.video-card iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.video-card .video-title { padding: 12px 16px 14px; font-size: 19px; font-weight: 700; }
.channel-btn {
  display: block; margin: 24px auto 8px; padding: 16px 32px;
  background: var(--bibi-red); color: #fff;
  border-radius: 999px; font-size: 21px; font-weight: 700;
  box-shadow: var(--shadow); text-decoration: none; width: fit-content;
}
.channel-btn:active { transform: scale(0.95); }

/* ===== Lojinha ===== */
.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px; max-width: 1100px; margin: 0 auto;
}
.shop-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.shop-card .shop-emoji { font-size: 60px; }
.shop-card .shop-name { font-size: 20px; font-weight: 700; }
.shop-card .shop-price { font-size: 17px; color: var(--ink-soft); }
.shop-badge {
  padding: 8px 22px; border-radius: 999px; font-size: 17px; font-weight: 700; color: #fff;
}
.shop-badge.available { background: var(--green); text-decoration: none; }
.shop-badge.available:active { transform: scale(0.95); }
.shop-badge.soon { background: var(--ink-soft); }
.shop-card.soon { opacity: 0.75; }
.shop-card.soon .shop-emoji { filter: grayscale(0.5); }

/* ===== Portão dos pais ===== */
#parent-gate {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(58, 51, 69, 0.65);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
#parent-gate.active { display: flex; }
.gate-box {
  background: #fff; border-radius: var(--radius); padding: 32px 28px;
  max-width: 420px; text-align: center; box-shadow: var(--shadow);
}
.gate-box h2 { margin: 0 0 6px; font-size: 26px; }
.gate-box p { margin: 0 0 20px; font-size: 18px; color: var(--ink-soft); }
.gate-hold-btn {
  width: 130px; height: 130px; border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--gate-progress, 0) * 1%), #EDE7F3 0);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 54px;
  transition: transform 0.1s;
}
.gate-hold-btn:active { transform: scale(0.95); }
.gate-hold-btn .gate-inner {
  width: 104px; height: 104px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.gate-cancel { margin-top: 18px; font-size: 18px; color: var(--ink-soft); padding: 12px; }

/* ===== Navegação inferior ===== */
.bottom-nav {
  display: flex; justify-content: space-around;
  background: #fff; padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 0 rgba(58, 51, 69, 0.08);
  z-index: 5;
}
.nav-btn {
  flex: 1; max-width: 200px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 20px;
  font-size: 16px; font-weight: 700; color: var(--ink-soft);
}
.nav-btn .nav-icon { font-size: 30px; }
.nav-btn.active { background: #FFEFC9; color: #7A4A12; }
.nav-btn:active { transform: scale(0.93); }

/* ===== Pontos da Turma (top-bar) ===== */
.top-bar .points-badge {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.75); color: #7A4A12;
  font-weight: 800; font-size: 17px;
  padding: 8px 16px; border-radius: 999px;
  box-shadow: 0 3px 0 rgba(122, 74, 18, 0.18);
  white-space: nowrap;
}

/* ===== Botão de som (pais) ===== */
.top-bar .mute-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  font-size: 22px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(122, 74, 18, 0.18);
}
.top-bar .mute-btn:active { transform: scale(0.9); }
.top-bar .mute-btn.muted { opacity: 0.55; }
.top-bar .site-link { margin-left: 0; }

/* ===== Splash de boas-vindas ===== */
#splash {
  position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(180deg, #FFCE5C 0%, var(--bibi-yellow) 60%, #EFA92B 100%);
  display: flex; align-items: center; justify-content: center;
}
#splash.hidden { display: none; }
.splash-box { text-align: center; animation: pop-in 0.35s ease-out; }
.splash-char { display: block; width: min(46vmin, 260px); height: min(46vmin, 260px); margin: 0 auto 8px; animation: splash-bob 2.2s ease-in-out infinite; }
@keyframes splash-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.splash-box h2 { font-size: clamp(38px, 8vmin, 56px); margin: 0 0 22px; color: #7A4A12; letter-spacing: 1px; }
.splash-box h2 span { color: var(--bibi-red); }
.splash-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.splash-play {
  font-size: clamp(22px, 4.5vmin, 30px); font-weight: 800; color: #fff;
  background: var(--green); padding: 18px 42px; border-radius: 999px;
  box-shadow: 0 6px 0 rgba(58, 51, 69, 0.22);
  animation: splash-pulse 1.6s ease-in-out infinite;
}
.splash-play:active { transform: scale(0.94); }
@keyframes splash-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.splash-login {
  font-size: clamp(17px, 3.2vmin, 22px); font-weight: 800; color: #7A4A12;
  background: rgba(255, 255, 255, 0.8); padding: 14px 30px; border-radius: 999px;
  box-shadow: 0 4px 0 rgba(122, 74, 18, 0.2);
}
.splash-login:active { transform: scale(0.95); }
.splash-link {
  font-size: 16px; font-weight: 700; color: #7A4A12; opacity: 0.85;
  padding: 8px 14px; text-decoration: underline;
}

/* ===== Perfis (estilo YouTube Kids) ===== */
.profile-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px; max-width: 90vw;
}
.profile-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  padding: 16px 18px 12px;
  min-width: 128px; min-height: 150px;
  box-shadow: 0 5px 0 rgba(122, 74, 18, 0.2);
  transition: transform 0.12s ease;
}
.profile-card:active { transform: scale(0.93); }
.profile-card.active { box-shadow: 0 0 0 4px var(--green), 0 5px 0 rgba(122, 74, 18, 0.2); }
.profile-card .profile-avatar { width: 76px; height: 76px; display: block; }
.profile-card .profile-avatar svg { width: 100%; height: 100%; }
.profile-card .profile-plus { font-size: 52px; line-height: 76px; text-align: center; }
.profile-card .profile-name { font-size: 19px; font-weight: 800; color: var(--ink); }
.profile-card .profile-age { font-size: 14px; font-weight: 700; color: var(--ink-soft); min-height: 17px; }
.profile-card.profile-new { background: rgba(255, 255, 255, 0.55); border: 3px dashed rgba(122, 74, 18, 0.35); box-shadow: none; }

.top-bar .profile-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, 0.65); color: #7A4A12;
  font-family: inherit; font-weight: 800; font-size: 15px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  box-shadow: 0 3px 0 rgba(122, 74, 18, 0.18);
}
.top-bar .profile-chip:active { transform: scale(0.95); }
.top-bar .profile-chip .chip-avatar { width: 32px; height: 32px; display: block; }
.top-bar .profile-chip .chip-avatar svg { width: 100%; height: 100%; }

#profile-modal {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(58, 51, 69, 0.65);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
#profile-modal.active { display: flex; }
.profile-form h3 { margin: 0 0 14px; font-size: 24px; }
.profile-form input {
  width: 100%;
  font-family: inherit; font-size: 18px; color: var(--ink);
  padding: 14px 18px; border: 2px solid #EDE7F3; border-radius: 16px; outline: none;
  background: #FFFDF8;
}
.profile-form input:focus { border-color: var(--bibi-blue); }
.profile-form .pf-label { margin: 16px 0 8px; font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.profile-form .pf-ages { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-form .pf-age {
  width: 54px; height: 54px; border-radius: 50%;
  background: #F4EFE6; font-size: 22px; font-weight: 800; color: var(--ink);
  box-shadow: 0 3px 0 rgba(58, 51, 69, 0.12);
}
.profile-form .pf-age.sel { background: var(--bibi-yellow); color: #7A4A12; box-shadow: 0 0 0 3px #E0A020; }
.profile-form .pf-avatars { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-form .pf-avatar {
  width: 64px; height: 64px; border-radius: 18px;
  background: #F4EFE6; padding: 6px;
  box-shadow: 0 3px 0 rgba(58, 51, 69, 0.12);
}
.profile-form .pf-avatar svg { width: 100%; height: 100%; }
.profile-form .pf-avatar.sel { background: #E9F7EC; box-shadow: 0 0 0 3px var(--green); }
.profile-form .pf-save { margin-top: 18px; font-size: 19px; }

/* ===== Álbum de figurinhas ===== */
.album-head { text-align: center; font-size: 21px; font-weight: 800; color: #7A4A12; margin-bottom: 18px; }
.album-section { max-width: 1100px; margin: 0 auto 26px; }
.album-section h3 {
  font-size: 22px; margin: 0 0 12px; color: var(--ink);
}
.album-section h3 small { color: var(--ink-soft); font-size: 16px; font-weight: 700; }
.album-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px; max-width: 1100px; margin: 0 auto;
}
.sticker-card .sticker-art { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,0.12)); }
.sticker-card.r-comum.unlocked    { box-shadow: 0 0 0 3px #D9D2E3, var(--shadow); }
.sticker-card.r-rara.unlocked     { box-shadow: 0 0 0 3px var(--bibi-blue), var(--shadow); }
.sticker-card.r-epica.unlocked    { box-shadow: 0 0 0 3px var(--purple), var(--shadow); background: linear-gradient(180deg, #FBF7FF, #F1E8FF); }
.sticker-card.r-lendaria.unlocked {
  box-shadow: 0 0 0 3px var(--bibi-yellow), 0 0 18px rgba(245, 185, 64, 0.55), var(--shadow);
  background: linear-gradient(180deg, #FFFBEE, #FFF0C9);
}
.sticker-card.trophy.unlocked.t-ouro   { box-shadow: 0 0 0 3px #E8B923, 0 0 14px rgba(232,185,35,0.5), var(--shadow); }
.sticker-card.trophy.unlocked.t-prata  { box-shadow: 0 0 0 3px #B8BEC9, var(--shadow); }
.sticker-card.trophy.unlocked.t-bronze { box-shadow: 0 0 0 3px #C98A54, var(--shadow); }
.sticker-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 10px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 140px; justify-content: center;
}
.sticker-card .sticker-emoji { font-size: 56px; }
.sticker-card .sticker-name { font-size: 16px; font-weight: 700; }
.sticker-card.locked { background: #F4EFE6; box-shadow: none; }
.sticker-card.locked .sticker-emoji { filter: grayscale(1); opacity: 0.35; }
.sticker-card.locked .sticker-name { color: var(--ink-soft); opacity: 0.7; }
.sticker-card.unlocked { animation: pop-in 0.3s ease-out; }

#sticker-toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(30px);
  background: var(--card); color: var(--ink);
  padding: 14px 26px; border-radius: 999px; box-shadow: var(--shadow);
  font-size: 20px; font-weight: 800; z-index: 300;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
#sticker-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Modal da conta (entrada; atrás do portão) ===== */
#account-modal {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(58, 51, 69, 0.65);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
#account-modal.active { display: flex; }
.account-modal-box { position: relative; width: min(560px, 94vw); }
.account-modal-box .account-box { margin: 0; }
.account-close {
  position: absolute; top: -14px; right: -10px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow);
  font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ===== Conta (área dos pais, dentro da Lojinha) ===== */
.account-box {
  max-width: 1100px; margin: 0 auto 20px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 22px;
}
.account-box h3 { margin: 0 0 4px; font-size: 20px; }
.account-box p { margin: 0 0 12px; font-size: 15px; color: var(--ink-soft); }
.account-box .acc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.account-box input {
  flex: 1 1 180px; min-width: 0;
  font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 16px; border: 2px solid #EDE7F3; border-radius: 16px; outline: none;
  background: #FFFDF8;
}
.account-box input:focus { border-color: var(--bibi-blue); }
.account-box .acc-btn {
  font-size: 16px; font-weight: 800; color: #fff;
  padding: 12px 22px; border-radius: 999px; box-shadow: 0 3px 0 rgba(58, 51, 69, 0.15);
}
.account-box .acc-btn:active { transform: scale(0.95); }
.account-box .acc-btn.primary { background: var(--green); }
.account-box .acc-btn.ghost { background: var(--ink-soft); }
.account-box .acc-hint { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }
.account-box .acc-msg { font-size: 15px; font-weight: 700; margin-top: 10px; }
.account-box .acc-msg.err { color: var(--bibi-red); }
.account-box .acc-msg.ok { color: var(--green); }

/* ===== Seletor de nível ===== */
#level-modal {
  position: fixed; inset: 0; z-index: 205;
  background: rgba(58, 51, 69, 0.65);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
#level-modal.active { display: flex; }
.level-box {
  background: #fff; border-radius: var(--radius); padding: 28px 30px;
  text-align: center; box-shadow: var(--shadow); max-width: 520px;
}
.level-box h3 { margin: 0 0 4px; font-size: 24px; }
.level-box p { margin: 0 0 18px; font-size: 17px; color: var(--ink-soft); font-weight: 700; }
.level-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.level-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 104px; height: 104px; border-radius: 26px;
  background: #F4EFE6; box-shadow: 0 4px 0 rgba(58, 51, 69, 0.14);
  transition: transform 0.12s ease;
}
.level-btn:active { transform: scale(0.93); }
.level-btn .level-num { font-size: 38px; font-weight: 800; color: var(--ink); line-height: 1; }
.level-btn .level-tag { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.level-btn[data-lvl="1"] { background: #E9F7EC; }
.level-btn[data-lvl="2"] { background: #FFEFC9; }
.level-btn[data-lvl="3"] { background: #E8E3FF; }
.level-btn.sel { box-shadow: 0 0 0 4px var(--green), 0 4px 0 rgba(58, 51, 69, 0.14); }
.level-btn.locked { opacity: 0.55; box-shadow: none; }

/* ===== Pacote de presente / recompensa (a criança ABRE) ===== */
#gift-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: radial-gradient(circle at 50% 42%, rgba(255,220,120,0.4), rgba(58,51,69,0.72) 70%);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
#gift-overlay.active { display: flex; animation: pop-in 0.3s ease-out; }
.gift-box { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gift-title { font-size: clamp(24px, 5vmin, 34px); font-weight: 800; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,0.25); }
.gift-pack {
  width: min(44vmin, 240px); height: min(44vmin, 240px);
  display: flex; align-items: center; justify-content: center;
  font-size: min(30vmin, 170px); line-height: 1;
  animation: gift-wobble 1.2s ease-in-out infinite;
}
.gift-pack:active { transform: scale(0.92); }
.gift-pack.opening { animation: gift-shake 0.5s ease-in-out; }
@keyframes gift-wobble { 0%, 100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.05); } }
@keyframes gift-shake {
  0%, 100% { transform: scale(1) rotate(0); }
  20% { transform: scale(1.1) rotate(-12deg); } 40% { transform: scale(1.12) rotate(12deg); }
  60% { transform: scale(1.15) rotate(-10deg); } 80% { transform: scale(1.3) rotate(6deg); opacity: 0.9; }
}
.gift-hint { font-size: 20px; font-weight: 700; color: #FFF3D6; animation: splash-pulse 1.4s ease-in-out infinite; }
.gift-reveal { display: none; }
.gift-reveal.show { display: block; animation: gift-reveal-kf 0.5s cubic-bezier(0.2,0.9,0.3,1.4); }
@keyframes gift-reveal-kf { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.gift-reveal .gift-coins { font-size: clamp(40px, 9vmin, 64px); font-weight: 800; color: #FFE9A8; text-shadow: 0 4px 0 rgba(0,0,0,0.25); }
.gift-reveal .gift-streak { font-size: 22px; font-weight: 800; color: #fff; margin-top: 6px; }
.gift-reveal .gift-sticker-art { width: min(40vmin, 200px); height: min(40vmin, 200px); object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3)); }
.gift-reveal .gift-sticker-emoji { font-size: min(34vmin, 150px); line-height: 1; }
.gift-reveal .gift-sticker-name { font-size: 24px; font-weight: 800; color: #fff; margin-top: 4px; text-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.gift-done {
  display: none; font-size: 22px; font-weight: 800; color: #fff;
  background: var(--green); padding: 14px 40px; border-radius: 999px;
  box-shadow: 0 5px 0 rgba(58,51,69,0.3);
}
.gift-done:active { transform: scale(0.95); }
#gift-overlay.opened .gift-hint { display: none; }
#gift-overlay.opened .gift-done { display: inline-block; }

/* ===== Confete (usado pelo SDK) ===== */
.sdk-confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.sdk-confetti {
  position: absolute; top: -20px; width: 14px; height: 14px;
  animation: sdk-confetti-fall 1.6s ease-in forwards;
}
@keyframes sdk-confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.6; }
}