/* Dino da doacao do Evrima Live Map. Gavazzi Labs. Mesmo arquivo no site e no app.
   Tudo com prefixo ddoa- para nao colidir com nada. Cores = identidade do rex verde (#2ee87a). */
.ddoa-trilha, .ddoa-dino, .ddoa-veu{
  --ddoa-acc:#2ee87a; --ddoa-acc-2:#8dffbd; --ddoa-escuro:#032a17; --ddoa-creme:#fff3cf;
  --ddoa-ink:#e9efe9; --ddoa-ink-2:#b4beb7; --ddoa-mute:#86918a;
  --ddoa-marca:"Russo One","Dino","Geist",system-ui,sans-serif;
  --ddoa-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- o dino (botao) ---------- */
.ddoa-dino{ position:relative; display:block; width:var(--ddoa-w,118px); padding:0; margin:0; border:0; background:none;
  cursor:pointer; color:inherit; font:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.ddoa-corpo{ display:block; border-radius:16px; transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.ddoa-dino:focus{ outline:none; }
.ddoa-dino:focus-visible .ddoa-corpo{ outline:2px solid var(--ddoa-acc); outline-offset:4px; }
.ddoa-dino:active .ddoa-corpo{ transform:scale(.95); }
.ddoa-svg{ display:block; width:100%; height:auto; overflow:visible; }
.ddoa-svg .ddoa-sombra{ fill:rgba(0,0,0,.38); }
.ddoa-placa-txt{ font-family:var(--ddoa-marca); font-weight:400; fill:#0b3d22; letter-spacing:.05em; }
.ddoa-svg .ddoa-olho-feliz, .ddoa-svg .ddoa-bochecha, .ddoa-svg .ddoa-lingua{ display:none; }
.ddoa-svg.feliz .ddoa-olho{ display:none; }
.ddoa-svg.feliz .ddoa-olho-feliz, .ddoa-svg.feliz .ddoa-lingua{ display:inline; }
.ddoa-svg.feliz .ddoa-bochecha{ display:inline; opacity:.75; }

/* balaozinho "apoia o app?" */
.ddoa-balao{ position:absolute; left:50%; bottom:calc(100% + 2px); z-index:2; pointer-events:none;
  transform:translate(calc(-50% + var(--bx,0px)), 8px) scale(.7); transform-origin:50% 100%; opacity:0;
  padding:6px 12px; border-radius:12px; border:2px solid var(--ddoa-escuro); background:var(--ddoa-creme); color:#0b3d22;
  font:600 13px/1.2 var(--ddoa-sans); white-space:nowrap; box-shadow:0 6px 16px -6px rgba(0,0,0,.6);
  transition:opacity .2s ease, transform .32s cubic-bezier(.2,1.5,.4,1); }
.ddoa-balao::after{ content:""; position:absolute; left:calc(50% - var(--bx,0px)); bottom:-7px; width:10px; height:10px; margin-left:-5px;
  background:var(--ddoa-creme); border-right:2px solid var(--ddoa-escuro); border-bottom:2px solid var(--ddoa-escuro); transform:rotate(45deg); }
.ddoa-dino.feliz .ddoa-balao{ opacity:1; transform:translate(calc(-50% + var(--bx,0px)), 0) scale(1); }

/* ---------- faixa onde ele trota ---------- */
.ddoa-trilha{ position:relative; height:var(--ddoa-trilha-h,132px); overflow:hidden; }
.ddoa-trilha::before{ content:""; position:absolute; left:0; right:0; bottom:8px; height:2px; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(46,232,122,.28) 0 10px, transparent 10px 22px);
  -webkit-mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ddoa-trilha .ddoa-dino{ position:absolute; left:0; bottom:4px; will-change:transform; }

/* dino parado (ao lado de um titulo) */
.ddoa-parado{ --ddoa-w:150px; margin-top:34px; }

/* ---------- popup ---------- */
html.ddoa-travado{ overflow:hidden; }
.ddoa-veu{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:14px;
  background:rgba(2,7,5,.74); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  opacity:0; transition:opacity .25s ease; font-family:var(--ddoa-sans); color:var(--ddoa-ink); }
.ddoa-veu[hidden]{ display:none; }
.ddoa-veu.aberto{ opacity:1; }
.ddoa-veu.saindo{ opacity:0; transition-duration:.22s; }
.ddoa-caixa{ position:relative; width:min(580px,100%); max-height:92vh; max-height:92dvh; overflow:auto; overscroll-behavior:contain;
  border-radius:24px; border:1px solid rgba(46,232,122,.34);
  background:radial-gradient(120% 60% at 50% 0%, rgba(46,232,122,.14), transparent 60%), #0b120e;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset; outline:none; }
.ddoa-caixa.festejando{ overflow:hidden; }
.ddoa-veu.aberto .ddoa-caixa{ animation:ddoa-nasce .66s cubic-bezier(.2,1.25,.4,1) both; }
.ddoa-veu.saindo .ddoa-caixa{ animation:ddoa-some .24s cubic-bezier(.5,0,.8,.4) both; }
@keyframes ddoa-nasce{
  0%{ transform:translate(var(--ox,0px), var(--oy,0px)) scale(.16) rotate(-6deg); opacity:0; }
  55%{ transform:translate(0,0) scale(1.035) rotate(.6deg); opacity:1; }
  78%{ transform:scale(.985) rotate(-.3deg); }
  100%{ transform:none; opacity:1; } }
@keyframes ddoa-some{ to{ transform:translate(var(--ox,0px), var(--oy,0px)) scale(.25); opacity:0; } }

.ddoa-x{ position:absolute; top:12px; right:12px; z-index:4; width:40px; height:40px; display:grid; place-items:center;
  border-radius:999px; border:1px solid rgba(233,239,233,.16); background:rgba(7,12,9,.55); color:var(--ddoa-ink); cursor:pointer;
  transition:background-color .18s, transform .25s cubic-bezier(.2,1.5,.4,1); }
.ddoa-x svg{ width:18px; height:18px; }
.ddoa-x:hover{ background:rgba(46,232,122,.16); transform:rotate(90deg); }
.ddoa-x:focus-visible, .ddoa-bt:focus-visible, .ddoa-som:focus-visible{ outline:2px solid var(--ddoa-acc); outline-offset:3px; }

.ddoa-conteudo{ padding:0 22px; }
.ddoa-veu.aberto .ddoa-conteudo > *{ animation:ddoa-sobe .5s cubic-bezier(.2,.9,.3,1) both; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(2){ animation-delay:.16s; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(3){ animation-delay:.22s; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(4){ animation-delay:.28s; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(5){ animation:none; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(6){ animation-delay:.42s; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(7){ animation:none; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(8){ animation-delay:.5s; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(9){ animation-delay:.58s; }
@keyframes ddoa-sobe{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* palco com o dino feliz */
.ddoa-palco{ position:relative; height:156px; margin:0 -22px 14px; overflow:hidden; border-radius:24px 24px 0 0;
  background:radial-gradient(60% 90% at 50% 115%, rgba(46,232,122,.42), transparent 70%), linear-gradient(180deg, #0f2a1c, #0b120e 92%); }
.ddoa-chao{ position:absolute; left:8%; right:8%; bottom:18px; height:2px;
  background:repeating-linear-gradient(90deg, rgba(141,255,189,.35) 0 10px, transparent 10px 20px); }
.ddoa-palco-dino{ position:absolute; left:50%; bottom:12px; width:210px; transform:translateX(-50%); }
.ddoa-cor{ position:absolute; bottom:52px; left:calc(22% + var(--i) * 11%); width:12px; height:12px; opacity:0;
  background:#ff5c8a; transform:rotate(45deg); animation:ddoa-cor 3.4s calc(var(--i) * .55s) ease-in infinite; }
.ddoa-cor::before, .ddoa-cor::after{ content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:inherit; }
.ddoa-cor::before{ left:-6px; top:0; }
.ddoa-cor::after{ left:0; top:-6px; }
@keyframes ddoa-cor{ 0%{ opacity:0; transform:translateY(0) rotate(45deg) scale(.4); } 15%{ opacity:.95; }
  100%{ opacity:0; transform:translate(calc((var(--i) - 2.5) * 6px), -120px) rotate(45deg) scale(1.05); } }
.ddoa-brilho{ position:absolute; top:var(--y,20%); left:calc(6% + var(--i) * 13.5%); width:10px; height:10px;
  background:#fff3cf; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:ddoa-brilha 2.2s calc(var(--i) * .31s) ease-in-out infinite; opacity:.2; }
@keyframes ddoa-brilha{ 0%,100%{ opacity:.1; transform:scale(.5) rotate(0); } 50%{ opacity:1; transform:scale(1.15) rotate(45deg); } }

.ddoa-titulo{ margin:0; text-align:center; font:400 clamp(21px, 5.2vw, 27px)/1.2 var(--ddoa-marca); letter-spacing:.01em; color:var(--ddoa-acc-2);
  text-wrap:balance; padding:0 18px; }
.ddoa-texto{ margin:10px auto 0; max-width:46ch; text-align:center; color:var(--ddoa-ink-2); font-size:15.5px; line-height:1.55; text-wrap:pretty; }
.ddoa-vira{ margin:16px 0 8px; text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ddoa-mute); }
.ddoa-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0; padding:0; list-style:none; }
.ddoa-chips li{ padding:7px 12px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ddoa-acc-2);
  background:rgba(46,232,122,.1); border:1px solid rgba(46,232,122,.32); }
.ddoa-veu.aberto .ddoa-chips li{ animation:ddoa-pop .5s calc(.34s + var(--i) * .08s) cubic-bezier(.2,1.6,.4,1) both; }
@keyframes ddoa-pop{ from{ opacity:0; transform:scale(.4) rotate(-8deg); } to{ opacity:1; transform:none; } }

.ddoa-opt-t{ margin:20px 0 10px; font-size:15px; font-weight:600; color:var(--ddoa-ink); text-align:center; }
.ddoa-opcoes{ display:grid; grid-template-columns:1fr; gap:8px; margin:0; padding:0; list-style:none; }
.ddoa-opcao{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; min-width:0; padding:10px 14px; border-radius:16px;
  background:rgba(233,239,233,.035); border:1px solid rgba(233,239,233,.1);
  transition:border-color .2s, transform .25s cubic-bezier(.2,1.4,.4,1), background-color .2s; }
.ddoa-veu.aberto .ddoa-opcao{ animation:ddoa-sobe .5s calc(.46s + var(--i) * .07s) cubic-bezier(.2,.9,.3,1) both; }
.ddoa-opcao.pronta:hover{ border-color:rgba(46,232,122,.5); background:rgba(46,232,122,.06); transform:translateY(-2px); }
.ddoa-opcao-ic{ display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:var(--ddoa-acc); background:rgba(46,232,122,.1); }
.ddoa-ic{ width:20px; height:20px; }
.ddoa-opcao-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 110px; }
.ddoa-opcao-txt b{ font-size:15px; font-weight:600; color:var(--ddoa-ink); }
.ddoa-opcao-txt span{ font-size:13px; color:var(--ddoa-ink-2); line-height:1.4; }
.ddoa-breve{ margin-left:auto; padding:6px 11px; border-radius:999px; border:1px dashed rgba(233,239,233,.22);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ddoa-mute); }
.ddoa-aviso{ margin:12px 0 0; text-align:center; font-size:13.5px; color:var(--ddoa-ink-2); }
.ddoa-aviso[hidden]{ display:none; }

.ddoa-rodape{ position:sticky; bottom:0; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px -22px 0; padding:14px 22px 18px;
  border-top:1px solid rgba(233,239,233,.08); background:linear-gradient(180deg, rgba(11,18,14,.92), #0b120e 40%); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ddoa-esp{ flex:1 1 auto; }
.ddoa-bt{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:12px; cursor:pointer;
  font:600 14.5px/1.1 var(--ddoa-sans); border:1px solid transparent; text-align:center;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), background-color .18s, border-color .18s; }
.ddoa-bt-pri{ background:var(--ddoa-acc); color:#03170b; box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 26px -10px rgba(46,232,122,.7); }
.ddoa-bt-pri:hover{ background:#4cf08f; transform:translateY(-1px); }
.ddoa-veu.aberto #ddoaJaDoei{ animation:ddoa-sobe .5s .6s both, ddoa-cutuca 3.6s 2.4s ease-in-out infinite; }
@keyframes ddoa-cutuca{ 0%,82%,100%{ transform:none; } 86%{ transform:rotate(-4deg) scale(1.05); } 90%{ transform:rotate(4deg) scale(1.05); } 94%{ transform:rotate(-2deg); } }
.ddoa-bt-sec{ background:transparent; color:var(--ddoa-ink); border-color:rgba(233,239,233,.16); }
.ddoa-bt-sec:hover{ border-color:rgba(46,232,122,.5); background:rgba(233,239,233,.04); }
.ddoa-bt-opc{ min-height:38px; padding:0 14px; font-size:13.5px; margin-left:auto; background:rgba(46,232,122,.12); color:var(--ddoa-acc-2); border-color:rgba(46,232,122,.4); }
.ddoa-bt-opc:hover{ background:rgba(46,232,122,.2); }
.ddoa-som{ display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 13px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(233,239,233,.16); background:none; color:var(--ddoa-mute); font:500 13px/1 var(--ddoa-sans); }
.ddoa-som svg{ width:17px; height:17px; }
.ddoa-som.on{ color:var(--ddoa-acc-2); border-color:rgba(46,232,122,.45); background:rgba(46,232,122,.08); }
.ddoa-som.on .ddoa-som-risco{ display:none; }

/* ---------- comemoracao ---------- */
.ddoa-festa{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:24px; text-align:center; overflow:hidden; border-radius:24px;
  background:radial-gradient(70% 55% at 50% 45%, rgba(46,232,122,.24), transparent 70%), #0a110d; }
.ddoa-festa > :not(.ddoa-confete){ position:relative; z-index:1; }
.ddoa-festa[hidden]{ display:none; }
.ddoa-festa:not([hidden]){ animation:ddoa-sobe .35s ease-out both; }
.ddoa-confete{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ddoa-confete i{ position:absolute; top:-16px; left:var(--x); width:8px; height:13px; border-radius:2px; background:var(--c); opacity:0;
  animation:ddoa-cai var(--t) var(--d) cubic-bezier(.25,.6,.5,1) forwards; }
.ddoa-confete i.redondo{ width:9px; height:9px; border-radius:50%; }
.ddoa-confete i.fita{ width:5px; height:16px; }
@keyframes ddoa-cai{ 0%{ opacity:1; transform:translate(0,0) rotate(0); } 85%{ opacity:1; }
  100%{ opacity:0; transform:translate(var(--dx), 720px) rotate(var(--r)); } }
.ddoa-festa-dino{ width:min(240px, 62vw); margin-bottom:6px; }
.ddoa-festa-t{ margin:0; font:400 clamp(26px, 7vw, 34px)/1.1 var(--ddoa-marca); color:var(--ddoa-acc-2);
  animation:ddoa-pop .6s .15s cubic-bezier(.2,1.6,.4,1) both; }
.ddoa-festa-p{ margin:0 auto 8px; max-width:40ch; color:var(--ddoa-ink-2); font-size:15.5px; line-height:1.55; }

@media (max-width:520px){
  .ddoa-conteudo{ padding:0 16px; }
  .ddoa-rodape{ margin:16px -16px 0; padding:12px 16px 14px; }
  .ddoa-palco{ margin:0 -16px 12px; height:146px; }
  .ddoa-palco-dino{ width:176px; }
  .ddoa-rodape .ddoa-esp{ display:none; }
  .ddoa-rodape .ddoa-bt{ flex:1 1 40%; }
  .ddoa-som{ flex:1 1 100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .ddoa-veu, .ddoa-veu *, .ddoa-dino, .ddoa-dino *{ animation:none !important; transition:none !important; }
  .ddoa-cor, .ddoa-brilho, .ddoa-confete{ display:none; }
}