/* The greenhouse (letters as flowers, the glass-roof sky), the letter paper, and the gardener's panel. */
.estufa { overflow: hidden; }
.estufa-topo { position: relative; z-index: 2; text-align: center; }
.estufa-topo .titulo { text-shadow: 0 0 18px rgb(255 252 244 / .95); }
.legenda-ceu { margin: 2px 0 0; font: 500 21px var(--f-mao); color: var(--madeira); text-shadow: 0 0 12px rgb(255 252 244 / .95); }

/* the Elysion sky on the glass roof: unlit points are tiny; lit ones are gold four-pointed sparkles that breathe */
.ceu { z-index: 1; pointer-events: none; }
.ceu .estrela { fill: rgb(255 252 244 / .75); stroke: rgb(122 90 67 / .45); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
/* lit: gold with a dark gold edge, so it reads over the stone arch and over the glass */
.ceu .estrela.acesa { fill: #F4C95D; stroke: #8A5A1E; stroke-width: 2.4; paint-order: stroke; animation: brilha 3.6s ease-in-out var(--d) infinite; }
.ceu .estrela.nova { animation: acende 1400ms var(--curva) both, brilha 3.6s ease-in-out 1.4s infinite; }
@keyframes brilha { 50% { opacity: .6; } }
@keyframes acende { from { opacity: 0; transform: scale(2.4) rotate(45deg); } }

/* the flower bed: letters stand on the floor, each with its little shadow (nothing floats) */
.canteiro { z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 4px 8px; min-width: 320px; }
.flor-carta { position: relative; display: grid; justify-items: center; gap: 2px; width: 92px; min-height: 104px; padding: 4px; border: 0; background: none; color: var(--tinta);
}
.flor-carta:nth-child(3n) { --n: 1; } .flor-carta:nth-child(3n+1) { --n: 2; } .flor-carta:nth-child(4n) { --n: 3; }
/* the picture floats, not the button: the touch target stays still */
.flor-carta img { position: relative; width: 72px; height: 72px; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 1px 1px rgb(92 60 38 / .3)); transition: transform 300ms var(--curva); transform-origin: 50% 100%; }
.flor-carta::before { content: ''; position: absolute; top: 70px; left: 50%; width: 46px; height: 10px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(70 52 34 / .38), rgb(70 52 34 / 0)); }
@media (hover: hover) { .flor-carta:hover img { transform: rotate(-4deg); } }
.flor-carta:focus-visible img { transform: rotate(-4deg); }
.flor-carta .rotulo { font: 500 18px/1.1 var(--f-mao); text-align: center; padding: 1px 8px; border-radius: 999px; background: rgb(255 252 244 / .85); white-space: nowrap; }
.flor-carta.botao .rotulo { color: var(--hibisco); }
.flor-carta.semente img { width: 40px; height: 40px; margin-top: 32px; }
.flor-carta.semente .rotulo { color: var(--madeira); font-size: 17px; }
.flor-carta.dele img { filter: hue-rotate(250deg) saturate(.7) drop-shadow(0 4px 4px rgb(122 90 67 / .25)); }
.plantar { align-self: center; margin: 0 12px; }
.estufa .vazio { margin: 0; padding: 8px 16px; border-radius: 12px; background: rgb(255 252 244 / .85); font: 500 22px var(--f-mao); }
@keyframes flutua { 50% { translate: 0 -3px; } }

/* golden pollen drifting slowly across the greenhouse */
.polen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.polen i { position: absolute; top: calc(10% + var(--i) * 8%); left: -10px; width: 5px; height: 5px; border-radius: 50%; background: var(--sol); opacity: .7;
  box-shadow: 0 0 6px rgb(255 236 170 / .9); animation: polen calc(14s + var(--i) * 1.3s) linear calc(var(--i) * -2.1s) infinite; }
@keyframes polen { 0% { transform: translate(0, 0); } 50% { transform: translate(55vw, -30px); } 100% { transform: translate(110vw, 20px); } }

/* letter paper */
.folha.carta { padding-top: 44px; }
.papel-creme { background: #FFFCF4 url(/img/papel-creme.webp) center / cover; }
.papel-rosado { background: #FBEDEE url(/img/papel-rosado.webp) center / cover; }
.papel-hibisco { background: #F6E3E2 url(/img/papel-hibisco.webp) center / cover; }
.carta-texto { white-space: pre-wrap; font: 400 17px/1.75 var(--f-texto); max-width: 62ch; }
.assinatura { margin: 18px 0 0; text-align: right; font: 500 28px var(--f-mao); color: var(--hibisco); }
.folha .quando { margin: 0 0 12px; font-size: 14px; color: var(--madeira); }

/* forms inside paper sheets */
.folha-form { display: grid; gap: 8px; }
.folha-form label, .rotulo-campo { margin: 6px 0 0; font: 600 15px var(--f-texto); font-variant: small-caps; color: var(--madeira); }
.folha-form textarea, .folha-form input[type="password"], .folha-form input[type="date"] { width: 100%; padding: 10px 12px; border: 1px solid rgb(122 90 67 / .35); border-radius: 6px;
  background: rgb(255 252 244 / .85); font: 400 17px/1.6 var(--f-texto); color: var(--tinta); }
.folha-form textarea { resize: vertical; min-height: 180px; }
.folha-form .etiqueta { justify-self: start; margin-top: 10px; }
.papeis { display: flex; flex-wrap: wrap; gap: 10px; }
.papel-opcao { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgb(122 90 67 / .25); font: 400 15px var(--f-texto) !important; font-variant: normal !important; color: var(--tinta) !important; }
.amostra { width: 26px; height: 26px; border-radius: 4px; border: 1px solid rgb(122 90 67 / .3); }

/* the gardener */
.cena.jardineiro { display: grid; place-items: start center; }
.papel-cartao, .painel { width: min(100%, 680px); padding: 28px 24px; background: #FFFCF4 url(/img/papel-creme.webp) center / cover; box-shadow: 0 10px 30px rgb(122 90 67 / .2); }
.painel { display: grid; gap: 10px; }
.painel h2 { margin-top: 14px; font-size: 26px; color: var(--musgo); }
.painel .presenca { margin: 0; font-size: 15px; color: var(--madeira); }
.painel .presenca.aqui { color: var(--musgo); font-weight: 600; }
.painel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.painel li { padding: 12px 14px; border-radius: 8px; background: rgb(255 252 244 / .8); border: 1px solid rgb(122 90 67 / .18); }
.painel li.nova { border-color: var(--hibisco); }
.painel .recado { margin: 0; white-space: pre-wrap; }
.painel .quando { margin: 4px 0 0; font-size: 13px; color: var(--madeira); }
.painel .vazio { margin: 0; color: var(--madeira); }
.painel .sair { justify-self: start; margin-top: 16px; }

@media (min-width: 900px) {
  .flor-carta { width: 112px; min-height: 124px; }
  .flor-carta img { width: 88px; height: 88px; }
  .canteiro { padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .flor-carta img, .polen i, .ceu .estrela.acesa { animation: none !important; }
}
.estufa-topo .titulo { display: inline-block; padding: 0 18px 4px; border-radius: 16px; background: rgb(255 252 244 / .72); }
.estufa .estufa-pe { position: absolute; left: 0; right: 0; bottom: calc(var(--caminho-h) + 14px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; }
.ceu { z-index: 4; }
.estufa .estufa-acoes { display: contents; }
.estufa-acoes:empty { display: none; }