/* PIP IS LISTENING. Two cards, a robot, and nothing else on the screen: the
   child's whole job is to point, so anything that is not a picture is in the
   grown-up's strip at the bottom. */

#ears {
  display: flex;
  flex-direction: column;
  height: 100svh;
  background: var(--ink);
}

#title { display: grid; place-items: center; padding: 12px 0 2px; }
#title canvas { image-rendering: pixelated; }

#table {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 5vw, 56px);
  padding: 0 16px;
}

.listen-card {
  --size: min(46vh, 38vw, 360px);
  width: var(--size);
  height: var(--size);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.listen-card:active { transform: scale(0.97); }

/* right: it lifts and lights. There is no matching state for wrong, because
   wrong is not a thing that happens here, it is just the other word being
   played so the two land side by side in the ear. */
.listen-card.got {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--glow) 85%, transparent),
              0 18px 40px rgba(0, 0, 0, 0.4);
}
.listen-card.heard { animation: heard 0.5s ease; }
@keyframes heard {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

#pip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 0 14px;
}
#pip canvas { image-rendering: pixelated; }
/* the ROBOT only. This was `#pip canvas`, which also caught the pixel letters
   inside the button and squashed them to the robot's size, so the button was
   there the whole time and simply had nothing legible in it. */
#pip > canvas { width: 84px; height: 78px; }

/* NOT .again: style.css already owns that class for the parked recorder, where
   it is visibility:hidden unless the microphone is live, so this button was in
   the DOM at the right size with the right background and simply invisible.
   Renaming beats fighting the cascade with !important.

   SAY IT AGAIN is the child's only control, so it is the loudest thing on the
   screen after the two pictures. It used to be a 12% tint of the foreground,
   which on a dark page is very close to nothing at all. */
.hear-again {
  border: 0;
  border-radius: 999px;
  padding: 14px 24px;
  cursor: pointer;
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
}
.hear-again:hover { filter: brightness(1.08); }
.hear-again:active { transform: translateY(1px); }
.hear-again canvas { image-rendering: pixelated; }

.cheer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cheer canvas { image-rendering: pixelated; }
.cheer > canvas:first-child { width: 80px; height: 80px; }

.none {
  color: color-mix(in srgb, var(--fg) 60%, transparent);
  font-size: 14px;
}

/* MEDIA QUERIES LAST, or a base rule declared later wins and the phone layout
   silently does nothing. */
@media (max-width: 560px) {
  #table {
    gap: 10px;
    padding: 0 10px;
  }
  /* two cards plus the gap plus the padding must fit the viewport, and vw does
     not know about a scrollbar, so take it off the width rather than guessing */
  .listen-card { --size: min(38vh, calc((100vw - 32px) / 2)); }
  #title { padding: 8px 0 2px; }
  #pip { gap: 10px; padding: 4px 0 10px; }
  #pip > canvas { width: 60px; height: 56px; }
}

/* A silent screen share looks exactly like a working one, so playing a clip has
   to be visible as well as audible. Over telehealth the clinician is driving a
   shared browser and the sound may never reach the child at all. */
.hear-again.playing { animation: spoke 0.55s ease; }
@keyframes spoke {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  40%  { transform: scale(1.05); box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}