/* Simon Says: an amber megaphone with a crown is the tap target; the call shows big in a card under it. Nothing looks
   like the electronic memory toy: one shape, one color family, no four-color pad. */
:root {
  --accent: var(--call);
  --face: #1d2333; /* the megaphone's face and outline, dark in both modes (amber is light in both) */
  --pill-line: var(--call);
  --pill-on: var(--call);
  --pill-on-fg: #fff;
  --pill-focus: var(--call);
  /* The stage (game.css): the megaphone's size (never below --char-min: on the iPhone SE the call card covers its lower
     part, owner 2026-10-19), and the caption's height until the first Start, when fitScreen (kit.js) measures the
     tallest call, reveal or round end plus the tallest Next line on this phone at this text size */
  --char-min: 140px; --char-max: min(52vw, 220px);
  --cap-h: 10rem;
}
@media (prefers-color-scheme: dark) {
  :root { --pill-on-fg: #121a2c; }
}

.simon-btn {
  border: 0; background: none; padding: 0; cursor: pointer; border-radius: 24px;
  width: min(52vw, 220px); aspect-ratio: 5 / 4; max-width: 100%;
}
.simon-btn:focus-visible { outline: 4px solid var(--call); outline-offset: 6px; }
.simon-btn svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fill { fill: var(--amber); stroke: var(--face); stroke-width: 5; stroke-linejoin: round; }
.eye { fill: var(--face); }
.smile, .wink { fill: none; stroke: var(--face); stroke-width: 5; stroke-linecap: round; }
.wink { opacity: 0; }
.wink-on .eye-r .open { opacity: 0; }
.wink-on .eye-r .wink { opacity: 1; }
.meg, .crown, .waves { transform-box: view-box; }
.meg { transform-origin: 100px 150px; }
.waves { transform-origin: 170px 80px; }
.bob .meg { animation: bob .22s ease-out; }
.bob .waves { animation: pulse .3s ease-out; }
.hop .meg { animation: hop .5s ease-out; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes pulse { 50% { transform: scale(1.18); opacity: .6; } }
@keyframes hop { 40% { transform: translateY(-18px) rotate(-6deg); } 70% { transform: translateY(0) rotate(3deg); } }

/* The call: "Simon says" on its own line, the move under it, the same size, so a trick looks just like a real call
   missing its first line. From the first Start the card fills the caption (game.css), one height for every call,
   reveal, round end and Next line, so nothing moves while calls come and go. */
.callbox {
  width: 100%; background: var(--card); border: 3px solid var(--amber); border-radius: 18px; padding: 12px 14px 10px;
  display: flex; flex-direction: column; justify-content: center;
}
/* Before the first Start the card is out of sight but still in the accessibility tree (not hidden), so screen readers
   already know the live region when the first call fills it. */
.callbox.idle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; }
.call {
  margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 7vw, 1.8rem); line-height: 1.1; text-wrap: balance;
  min-height: 3.3em; display: flex; flex-direction: column; justify-content: center;
}
.call .say { display: block; }
.reveal .say { color: var(--call); }
.call .line { display: block; font-family: var(--body); font-weight: 800; font-size: 1.05rem; line-height: 1.3; margin-top: 6px; }
.end .line { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; margin: 0; }
.next { margin: 6px 0 0; color: var(--muted); font-weight: 800; font-size: .9rem; line-height: 1.25; min-height: max(2.5em, var(--next-h, 0px)); text-wrap: balance; }

.calling .main-btn { background: var(--muted); }
/* Eyes Up: the call stays as a gray read-out (game.css .eu-keep), the reveal and Next line in its grays too. */
[data-eyes-up][data-dimming] .reveal .say { color: inherit; }
[data-eyes-up][data-dimming] .next { color: var(--eu-fg); }
@media (prefers-reduced-motion: reduce) {
  .bob .meg, .bob .waves, .hop .meg { animation: none; }
}