/*
 * Easter egg "lfdl77" (skill easteregg, modelo web).
 * Ajuste só as variáveis de :root para casar com o tema do app.
 * Caminho da fonte: relativo a este CSS (copie caveat.ttf para o mesmo lugar).
 */
@font-face {
  font-family: "EE Caveat";
  src: url("caveat.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Adaptado ao RankTask: as cores seguem os tokens do app (claro e escuro já resolvidos em tokens.css). */
  --ee-accent: var(--primary-text); /* cor inicial do "lfdl77" (a do app) */
  --ee-gold: var(--gold);           /* cor final, no 8º toque (#a16207 no claro, por contraste; #e0a100 no escuro) */
  --ee-muted: var(--text-2);        /* "Desenvolvido por" e versão */
  --ee-gap: 28px;                   /* card ↔ balão ↔ base: mesmo espaço */
  --ee-ink: #111111;                /* traço e texto do balão */
  --ee-paper: #ffffff;              /* fundo do balão */
}

/* ---------- rodapé do card Sobre ---------- */
.ee-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.875rem;
}
.ee-signature {
  /* Parece texto comum: o clique é um segredo. */
  all: unset;
  cursor: default;
  padding: 6px 0;
  color: var(--ee-muted);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ee-signature:focus-visible { outline: 2px solid var(--ee-accent); outline-offset: 2px; border-radius: 4px; }
.ee-name { color: var(--ee-accent); font-weight: 700; display: inline-block; }
.ee-version { color: var(--ee-muted); font-family: ui-monospace, "JetBrains Mono", monospace; }

/* ---------- área reservada e balão ---------- */
.ee-hint-area {
  /* Sempre ocupa espaço (mesmo vazia): o layout não pula quando o balão aparece. */
  padding: var(--ee-gap) 0;
  display: flex;
  justify-content: center;
}
.ee-bubble {
  position: relative;
  max-width: min(360px, 100%);
  padding: 12px 20px;
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 50% 0;
  transition: opacity 160ms ease-out, transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.ee-bubble.ee-visible { opacity: 1; transform: scale(1); }
.ee-bubble-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;          /* a cauda sai para cima, até o "lfdl77" */
}
.ee-bubble-svg path { fill: var(--ee-paper); stroke: var(--ee-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ee-bubble-text {
  position: relative;
  margin: 0;
  text-align: center;
  font-family: "EE Caveat", cursive;
  font-weight: 600;
  font-size: 22px;
  line-height: 24px;
  color: var(--ee-ink);
}

/* ---------- foto Polaroid ---------- */
.ee-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}
.ee-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.ee-polaroid-wrap {
  position: relative;
  width: min(340px, 82vw);
  padding: 14px 14px 0 0;      /* espaço para o X sobressair no canto */
  rotate: -3deg;
  animation: ee-drop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ee-drop {
  from { opacity: 0; transform: translateY(-120px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.ee-polaroid {
  background: #fdfcf8;          /* branco de papel fotográfico */
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ee-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #e9e6dd;
  /* Revelação: começa quase branca e sem contraste. */
  filter: contrast(0.15) brightness(1.75);
  animation: ee-develop 2600ms cubic-bezier(0.4, 0, 0.2, 1) 250ms forwards;
}
@keyframes ee-develop { to { filter: none; } }
.ee-message, .ee-sign {
  font-family: "EE Caveat", cursive;
  font-weight: 600;
  color: #26245a;               /* tinta de caneta azul-escura */
  opacity: 0;
  animation: ee-fade 2600ms ease-out 250ms forwards;
}
.ee-message { margin: 12px 0 0; font-size: 26px; line-height: 28px; text-align: center; }
.ee-sign { align-self: flex-end; margin: 2px 6px 0 0; font-size: 22px; }
@keyframes ee-fade { to { opacity: 1; } }
.ee-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #1a1724;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ee-close svg { width: 22px; height: 22px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .ee-bubble, .ee-polaroid-wrap, .ee-photo, .ee-message, .ee-sign { transition: none; animation-duration: 1ms; animation-delay: 0ms; }
}