/* The wishing fountain: nymphs over the water, the welcome dialogue, conversations, and the drachma. */
.fonte { overflow: hidden; }
.fonte-topo { text-align: center; }
.fonte-topo .titulo { text-shadow: 0 0 18px rgb(255 252 244 / .95); }
.fonte .legenda { margin: 2px 0 0; font: 500 21px var(--f-mao); color: var(--madeira); text-shadow: 0 0 12px rgb(255 252 244 / .95); }

/* a nymph: the figure is the button that plays her song; the chip below opens a conversation */
.ninfa-fonte { z-index: 2; display: grid; justify-items: center; gap: 4px; transition: transform 900ms var(--curva); }
.ninfa-fonte.sobe, .ninfa-fonte.cantando { transform: translate(-50%, calc(-50% - 18px)); }
.tocar-ninfa { width: 100%; padding: 0; border: 0; background: none; touch-action: manipulation; }
.ninfa-fonte .figura { position: relative; width: 100%; aspect-ratio: 0.64; filter: drop-shadow(0 10px 12px rgb(110 139 78 / .25)); }
.ninfa-fonte .figura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ninfa-fonte .asas { transform-origin: 50% 32%; }
.ninfa-fonte .figura { transform-origin: 50% 40%; }
/* tiny sparkles rising around each nymph */
.brilhos { position: absolute; inset: 10% 0 0; pointer-events: none; }
.brilhos i { position: absolute; bottom: 10%; left: calc(18% + var(--k) * 16%); width: 5px; height: 5px; border-radius: 50%; background: #FFF6D2;
  box-shadow: 0 0 6px 2px rgb(255 236 170 / .8); opacity: 0; animation: brilho-sobe calc(2.6s + var(--k) * .45s) ease-out calc(var(--k) * -.9s) infinite; }
@keyframes brilho-sobe { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc((var(--k) - 2) * 6px), -90px) scale(1); } }
.ninfa-fonte.cantando .figura { filter: drop-shadow(0 0 16px rgb(255 240 190 / .95)) drop-shadow(0 10px 12px rgb(110 139 78 / .25)); }
/* the three friends at thumb height: a little portrait and a name each */

.conversar-ninfa { display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 0; border: 0; background: none; color: var(--tinta); }
.conversar-ninfa img { width: 52px; height: 52px; object-fit: cover; object-position: 50% 10%; border-radius: 50%; background: #FFFCF4;
  border: 2px solid #FFFCF4; box-shadow: 0 3px 10px rgb(122 90 67 / .25); }
.conversar-ninfa span { font: 500 18px/1 var(--f-mao); padding: 2px 8px; border-radius: 999px; background: rgb(255 252 244 / .9); }

/* ripples when the drachma lands */
.ondas { z-index: 1; aspect-ratio: 2.4; pointer-events: none; }
.ondas.vai::before, .ondas.vai::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; border: 2px solid rgb(255 255 255 / .85); animation: onda 1400ms ease-out both; }
.ondas.vai::after { animation-delay: 300ms; }
@keyframes onda { to { transform: scale(3); opacity: 0; } }
.fonte .ondas.vai.brilha { background: radial-gradient(closest-side, rgb(255 246 214 / .7), transparent); animation: brilha-fonte 1600ms ease-out both; }
@keyframes brilha-fonte { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.dracma-voo { position: fixed; z-index: 45; width: 56px; height: 56px; pointer-events: none; }
.deuses-ouviram { position: absolute; z-index: 5; left: 50%; top: 30%; transform: translateX(-50%); margin: 0; padding: 10px 22px; border-radius: 999px;
  background: rgb(255 252 244 / .94); font: 500 30px var(--f-mao); color: var(--hibisco); box-shadow: 0 6px 22px rgb(122 90 67 / .22); animation: sobe 700ms var(--curva) both; white-space: nowrap; }
.fonte-acoes { position: absolute; left: 0; right: 0; bottom: calc(var(--caminho-h) + 14px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 12px; }
.dracma-linha { display: flex; align-items: center; gap: 14px; margin: 8px 0; }
.dracma { width: 64px; height: 64px; touch-action: none; cursor: grab; filter: drop-shadow(0 4px 6px rgb(122 90 67 / .3)); }
.dracma-linha .dica { margin: 0; font-size: 15px; color: var(--madeira); }

/* speech balloons over the nymphs: typing dots, then words; older lines fade back while another speaks */
.baloes { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.balao-ninfa { position: absolute; left: 0; top: 0; width: max-content; max-width: min(42vw, 230px); padding: 8px 12px 10px; border-radius: 16px;
  background: #FFFCF4; box-shadow: 0 6px 18px rgb(122 90 67 / .22); border: 1px solid rgb(122 90 67 / .12); animation: balao 320ms var(--curva) both; transition: opacity 400ms; }
.balao-ninfa::after { content: ''; position: absolute; left: calc(var(--rabo, 50%) - 8px); bottom: -8px; width: 16px; height: 16px; background: #FFFCF4;
  transform: rotate(45deg); border-right: 1px solid rgb(122 90 67 / .12); border-bottom: 1px solid rgb(122 90 67 / .12); }
.balao-ninfa .quem { margin: 0; font: italic 600 15px/1.2 var(--f-titulo); color: var(--musgo); }
.balao-ninfa[data-ninfa="harpa"] .quem { color: #C25A74; }
.balao-ninfa[data-ninfa="sinos"] .quem { color: #7B64A6; }
.balao-ninfa .oque { margin: 2px 0 0; font: 400 15px/1.45 var(--f-texto); color: var(--tinta); }
.balao-ninfa.digitando .oque { display: inline-flex; gap: 4px; padding: 4px 0; }
.balao-ninfa.digitando .oque i { width: 7px; height: 7px; border-radius: 50%; background: var(--salvia); animation: pontinho 1s ease-in-out infinite; }
.balao-ninfa.digitando .oque i:nth-child(2) { animation-delay: .15s; } .balao-ninfa.digitando .oque i:nth-child(3) { animation-delay: .3s; }
.balao-ninfa.antigo { filter: saturate(.6); }
.balao-ninfa.antigo .oque { color: var(--madeira); }
@keyframes balao { from { opacity: 0; scale: .85; } }
@keyframes pontinho { 50% { transform: translateY(-4px); opacity: .5; } }

/* the bar he writes in: at thumb height, lifted over the keyboard */
.barra-conversa { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgb(255 252 244 / .97); box-shadow: 0 -8px 24px rgb(122 90 67 / .18); border-radius: 18px 18px 0 0; animation: sobe-folha 360ms var(--curva) both; }
.barra-conversa form { display: flex; align-items: flex-end; gap: 8px; max-width: 680px; margin: 0 auto; }
.barra-conversa input, .barra-conversa textarea { flex: 1; min-width: 0; min-height: 54px; max-height: 140px; padding: 15px 18px; border: 1px solid rgb(122 90 67 / .3); border-radius: 27px;
  resize: none; font: 400 17px/1.4 var(--f-texto); background: #FFFCF4; color: var(--tinta); }
/* send = the same wax seal as on the reply letter */
.enviar-redondo { flex: none; width: 54px; height: 54px; border: 0; display: grid; place-items: center; color: rgb(255 214 214 / .9); font-size: 24px;
  background: radial-gradient(circle at 38% 34%, #E0566A, #A81F33 62%, #84152A); filter: drop-shadow(0 3px 6px rgb(110 20 35 / .3));
  clip-path: polygon(50% 0, 63% 4%, 75% 2%, 84% 12%, 96% 18%, 97% 32%, 100% 45%, 96% 58%, 99% 71%, 89% 81%, 82% 94%, 68% 95%, 55% 100%, 42% 96%, 29% 99%, 19% 89%, 7% 83%, 5% 69%, 0 56%, 4% 43%, 1% 29%, 11% 19%, 18% 7%, 32% 5%); }
.enviar-redondo span::before { content: '✿'; }
.enviar-redondo:disabled { opacity: .5; }
.barra-topo { display: flex; justify-content: space-between; max-width: 680px; margin: 0 auto 6px; }
.barra-topo:has(.agora-nao) { justify-content: flex-end; margin-bottom: 0; }
.barra-topo button { min-height: 48px; padding: 4px 12px; border: 0; background: none; font: 600 14px var(--f-texto); font-variant: small-caps; color: var(--madeira); }
.meu-balao { max-width: 680px; margin: 0 auto 8px; text-align: right; font: 400 15px var(--f-texto); color: var(--madeira); }
.aviso-jardineiro { margin: 6px auto 0; max-width: 680px; font-size: 14px; line-height: 1.4; color: var(--madeira); text-align: center; }
.fonte.conversando .fonte-acoes, .fonte.conversando .fonte-topo .legenda { visibility: hidden; }
body:has(.barra-conversa:not([hidden])) .caminho { visibility: hidden; }
.espelho { position: absolute; inset: 0; }
.espelho.virada { transform: scaleX(-1); }
.historico-lista { display: grid; gap: 8px; }
.historico-lista .linha { margin: 0; font: 400 16px/1.55 var(--f-texto); }
.historico-lista .linha b { font-weight: 600; color: var(--musgo); }
.historico-lista .linha.eu b { color: var(--hibisco); }
.fonte-acoes .etiqueta { min-width: 220px; }
.fonte-acoes .etiqueta.clara { background: rgb(255 252 244 / .88); color: var(--madeira); }

@media (min-width: 701px) { .folha.conversa { height: min(80vh, 720px); } }
@media (max-width: 700px) { .folha.conversa { height: calc(var(--vvh, 100dvh) - 12px); max-height: none; } }
@media (prefers-reduced-motion: reduce) { .ninfa-fonte { transition: none; } .balao.digitando i, .brilhos i { animation: none; } }

/* the gardener reads the nymphs' conversations, folded */
.conversa-lida { border-radius: 8px; background: rgb(255 252 244 / .8); border: 1px solid rgb(122 90 67 / .18); padding: 8px 12px; }
.conversa-lida summary { cursor: pointer; min-height: 32px; font-size: 15px; color: var(--madeira); }
.conversa-lida .mensagens { max-height: 360px; min-height: 0; }
.painel .conversas { display: grid; gap: 8px; }
/* a phone on its side: a smaller title above the arches, the bubbles below it */
@media (max-height: 500px) { .fonte-topo .titulo { font-size: 28px; } .fonte-topo .legenda { display: none; } }
@media (min-width: 900px) { .balao-ninfa { max-width: 300px; padding: 10px 16px 12px; } .balao-ninfa .oque { font-size: 18px; } .balao-ninfa .quem { font-size: 17px; } }
@media (max-height: 500px) and (orientation: landscape) { .fonte-topo { margin-top: -40px; } .fonte-topo .titulo { font-size: 26px; } }
.balao-ninfa.embaixo::after { top: -8px; bottom: auto; border: 0; border-left: 1px solid rgb(122 90 67 / .12); border-top: 1px solid rgb(122 90 67 / .12); }