/* The padlock (issue 21): what a child sees at a Pro-only Game or a freemium feature without Pro.
   Mathew points and asks for a grown-up; a quiet link leads to the hold. Never a price.
   The Games' own padlock and sheet are platform/web/static/lock/. */

.lock-top { display: flex; }

.ask {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100%, 560px);
  padding: 0 16px max(24px, env(safe-area-inset-bottom));
}
.ask > .scroll-says { max-width: 100%; }

.ask-scene { display: flex; align-items: flex-end; justify-content: center; }
.ask-mathew { width: auto; height: clamp(190px, 32dvh, 340px); filter: drop-shadow(0 8px 0 rgb(20 30 15 / 30%)); }
.ask-sign {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(140px, 22dvh, 220px);
  aspect-ratio: 408 / 440;
  margin-bottom: 14%;
  margin-right: -4%;
  padding: 18% 13% 9%;
  background: url("/static/forest/sign.506d74019e.webp") center / contain no-repeat;
  filter: drop-shadow(0 6px 0 var(--drop));
  animation: sway 3.6s ease-in-out infinite alternate;
}
.ask-sign-art { width: 100%; height: auto; filter: saturate(0.55) brightness(0.9); }
.ask-sign-lock { position: absolute; right: -4%; bottom: -6%; width: 48%; height: auto; transform: rotate(8deg); animation: jiggle 2.4s ease-in-out 1s infinite; }

.ask-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }

/* For grown-ups: a small key, present and reachable but not the child's next tap. */
.ask-grownup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 12px;
  font: 400 18px / 1 var(--display);
  letter-spacing: 0.03em;
  color: var(--cream);
  text-shadow: 1.5px 0 var(--ink), -1.5px 0 var(--ink), 0 1.5px var(--ink), 0 -1.5px var(--ink);
  text-decoration: none;
}
.ask-grownup img { width: auto; height: 34px; filter: drop-shadow(0 2px 0 var(--drop)); }
.ask-grownup:focus-visible { outline: 4px solid var(--cream); outline-offset: 2px; border-radius: 12px; }

@keyframes jiggle { 0%, 84%, 100% { transform: rotate(8deg); } 90% { transform: rotate(-6deg); } 95% { transform: rotate(14deg); } }

@media (prefers-reduced-motion: reduce) {
  .ask * { animation: none !important; transition: none !important; }
}

/* Offline, a Game this tablet has not saved yet (/offline): its sign greyed under a crossed-out
   cloud, Mathew asking for a grown-up, and a card telling the grown-up what to do. */
.ask-sign.is-offline .ask-sign-art { filter: grayscale(1); opacity: 0.55; }
.ask-cloud {
  position: absolute; right: -8%; top: 2%;
  display: grid; place-items: center;
  width: 38%; aspect-ratio: 1;
  border: 3px solid var(--ink); border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 4px 0 var(--drop);
}
.ask-cloud svg { width: 62%; height: auto; }
.ask-says { margin: 0; max-width: 34ch; font: 700 clamp(17px, 2.4dvh, 21px) / 1.35 var(--round); color: var(--cream); text-align: center;
  text-shadow: 0 2px 6px rgb(10 20 10 / 70%); }
.ask-note {
  max-width: 480px; margin: 6px 0 0; padding: 12px 18px;
  border: 3px solid var(--ink); border-radius: 20px;
  background: var(--cream); color: var(--ink);
  font: 600 15px / 1.45 var(--round); text-align: left;
  box-shadow: 0 5px 0 var(--drop);
}
.ask-note b { font-weight: 800; }