/*
 * Audio Memory - web player styles (Phase 3a, 2026-09-18)
 * Spec: prompts/End User Features/Memory Games/memory_games_v1.md section 5.
 * Design: Figma "Memory Game Flow" question screens. Loaded only by lesson_runtime/lesson_session.html,
 * following the sequence-reasoning.css precedent for deck-specific styles.
 * Everything is scoped under #audioMemoryContainer_front so no other deck is affected.
 */

/* Isolation (2026-09-21): while the question surface is in Audio Memory mode, hide every generic
   question block. Several carry Bootstrap's d-grid (display: grid !important), which beats a plain
   inline display:none - that is how the Choice 1-4 buttons leaked onto the listening screen.
   !important here wins regardless of what any other deck's code leaves behind. The tip slot is
   deliberately not listed. */
#cardFront1.lesson-audio-memory-mode #columnarContainer_front,
#cardFront1.lesson-audio-memory-mode #sentenceContainer_front,
#cardFront1.lesson-audio-memory-mode #toleranceDisplayContainer1,
#cardFront1.lesson-audio-memory-mode #userAnswerContainer1,
#cardFront1.lesson-audio-memory-mode #multipleChoiceContainerFront {
  display: none !important;
}

#audioMemoryContainer_front {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 8px;
}

/* ---- Listening --------------------------------------------------------------------------- */

/* Listening phase is vertically centred on the stage, as in the Figma question screens. Same
   approach the other question modes use in appstyle.css (#cardAnimate.lesson-stage:has(...)):
   the stage becomes a flex box of near-viewport height and centres the surface. The selection grid
   is not centred - its Figma screens start at the top. */
#cardAnimate.lesson-stage:has(#cardFront1.lesson-audio-memory-listening) {
  display: flex;
  align-items: center;
  /* sizeListeningStage() measures the gap between the stage and the action bar and sets
     --am-listen-height (2026-09-24); the calc is the fallback before it runs. */
  min-height: var(--am-listen-height, calc(100dvh - 250px));
}

#cardAnimate.lesson-stage:has(#cardFront1.lesson-audio-memory-listening) #cardFront1.lesson-question-surface {
  width: 100%;
}

@media (min-width: 769px) {
  #cardAnimate.lesson-stage:has(#cardFront1.lesson-audio-memory-listening) {
    /* No bottom padding here (2026-09-24): the measured height already stops above the action
       bar, and padding on a centred flex box pushes its contents up by half that amount. */
    box-sizing: border-box;
  }
}

#audioMemoryContainer_front .am-listen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

#audioMemoryContainer_front .am-listen-card {
  width: 100%;
  background: #d6e8fb;
  border-radius: 22px;
  padding: 28px 24px;
  text-align: center;
}

#audioMemoryContainer_front .am-listen-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #111;
}

#audioMemoryContainer_front .am-listen-card p {
  margin: 0;
  color: #4a4a4a;
  font-size: 0.9rem;
  line-height: 1.4;
}

#audioMemoryContainer_front .am-listen-card.am-error {
  background: #fde2e2;
}

/* Waveform: static bars at rest, animated while speaking */
/* Helper text under the wave and the Tap to listen button (2026-09-24): an iPad in silent
   mode plays the round's sound effects but not the Web Audio voice clips, which reads as the
   game being broken. Quiet enough to skip when the audio is working. */
#audioMemoryContainer_front .am-audio-hint {
    margin: 8px 0 0;
    /* Small grey aside: same size as the Replay link above, deliberately lighter than it. */
    font-size: 0.8rem;
    color: #8a8a8a;
    text-align: center;
}

#audioMemoryContainer_front .am-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
}

#audioMemoryContainer_front .am-wave span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: #333;
  height: 30%;
}

#audioMemoryContainer_front .am-wave span:nth-child(odd)  { height: 70%; }
#audioMemoryContainer_front .am-wave span:nth-child(3n)   { height: 100%; }
#audioMemoryContainer_front .am-wave span:nth-child(4n)   { height: 45%; }

#audioMemoryContainer_front .am-wave.is-playing span {
  animation: am-wave-bounce 0.9s ease-in-out infinite;
}

#audioMemoryContainer_front .am-wave.is-playing span:nth-child(2n) { animation-delay: 0.15s; }
#audioMemoryContainer_front .am-wave.is-playing span:nth-child(3n) { animation-delay: 0.3s; }
#audioMemoryContainer_front .am-wave.is-playing span:nth-child(5n) { animation-delay: 0.45s; }

@keyframes am-wave-bounce {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  #audioMemoryContainer_front .am-wave.is-playing span { animation: none; }
}

/* 2026-09-24: Replay moved out of the action bar to sit under the wave, above the audio hint,
   so it belongs to the audio rather than to Continue. */
#audioMemoryContainer_front .am-replay {
  display: block;
  margin: 10px auto 0;
  /* Matches the fill in repeat.svg so the label and icon read as one control (2026-09-24). */
  color: #25314c;
  /* 50% up from the 0.8rem it shared with the audio hint below it (2026-09-24). */
  font-size: 1.2rem;
  text-decoration: none;
}

#audioMemoryContainer_front .am-replay:disabled {
  color: #b5b5b5;
}

/* Sized with the label: 24px alongside the 1.2rem text (2026-09-24). */
#audioMemoryContainer_front .am-replay-icon {
  width: 24px;
  height: 24px;
  vertical-align: -5px;
  margin-right: 4px;
}

#audioMemoryContainer_front .am-replay:disabled .am-replay-icon {
  opacity: 0.5;
}

/* ---- Selection grid ---------------------------------------------------------------------- */

#audioMemoryContainer_front .am-select {
  text-align: center;
  padding-top: 8px;
}

#audioMemoryContainer_front .am-prompt {
  font-weight: 600;
  margin: 0 0 2px;
  color: #111;
}

#audioMemoryContainer_front .am-counter {
  color: #e05aa8;
  font-size: 0.8rem;
  margin: 0 0 10px;
  min-height: 1.2em;
}

#audioMemoryContainer_front .am-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;

  /* 2026-09-23: a 12-tile grid is taller than a phone viewport and had no way to scroll -- the
     grid had no height limit or overflow of its own, and body/html are pinned to height:100%,
     so the extra rows were simply unreachable.

     Scrolling is given to the grid rather than the page: the page layout is shared by every
     question format, and the prompt and the Check bar should stay put while the tiles move.

     max() keeps the grid usable on a short viewport (a landscape phone, or a desktop window
     dragged small) instead of collapsing to a sliver. The subtracted space is the progress bar,
     prompt, counter and the fixed action bar. */
  /* sizeSelectionGrid() measures down to the action bar and sets --am-grid-height
     (2026-09-24); the max() is the fallback before it runs. */
  max-height: var(--am-grid-height, max(280px, calc(100dvh - 300px)));
  overflow-y: auto;
  /* Keep a scroll at the end of the tiles from scrolling the page behind it. */
  overscroll-behavior: contain;
  /* Momentum finger-drag on iOS; harmless elsewhere. */
  -webkit-overflow-scrolling: touch;
  /* Room so the last row is not flush against the clipped edge. */
  padding-bottom: 4px;

  /* No visible scrollbar, per design. The wheel, trackpad and finger drag all still work --
     this hides the indicator, it does not disable scrolling. */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge */
}
/* Fade the clipped edge while there is more to scroll, so a sliced tile reads as "keep
   going" rather than as a broken layout (2026-09-24). Removed at the end of the list. */
#audioMemoryContainer_front .am-grid.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%);
}

#audioMemoryContainer_front .am-grid::-webkit-scrollbar {
  display: none;                /* Chrome, Safari */
}

#audioMemoryContainer_front .am-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 0 6px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  transition: transform 0.08s ease;
}

#audioMemoryContainer_front .am-tile:active:not(:disabled) {
  transform: scale(0.97);
}

#audioMemoryContainer_front .am-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

#audioMemoryContainer_front .am-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
}

#audioMemoryContainer_front .am-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #222;
  line-height: 1.2;
}

#audioMemoryContainer_front .am-tile.is-selected .am-img-wrap {
  box-shadow: 0 0 0 2px #f2a3d4;
}

/* Position number on picks at ordered levels (spec 5d3) */
#audioMemoryContainer_front .am-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 22px;
  color: #fff;
  display: none;
}

#audioMemoryContainer_front .am-badge.is-position {
  display: block;
  background: #e05aa8;
}

#audioMemoryContainer_front .am-tile:disabled {
  cursor: default;
}

/* ---- Answer review (Phase 3b, 2026-09-21; Figma answer screens, spec 5e) --------------------- */

#audioMemoryContainer_front .am-review {
  text-align: center;
  padding-top: 4px;
  padding-bottom: 180px;  /* keep the last row clear of the result panel */
}

#audioMemoryContainer_front .am-review-headline {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: #111;
}

#audioMemoryContainer_front .am-review-sub {
  color: #6b6b6b;
  font-size: 0.8rem;
  margin: 0 0 12px;
}

/* Unordered: tile states - correct (green, check), missed (amber, !), wrong pick (red, x),
   untouched distractor (greyed) */
#audioMemoryContainer_front .am-review-tile {
  cursor: default;
}

/* The state colour is a translucent shade laid over the whole tile, image included (Figma), not a
   background tint - images are padded, so a background only showed as a coloured frame. */
#audioMemoryContainer_front .am-review-tile .am-img-wrap {
  position: relative;
}

#audioMemoryContainer_front .am-review-tile .am-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

#audioMemoryContainer_front .am-review-tile.is-correct .am-img-wrap::after { background: rgba(52, 180, 74, 0.32); }
#audioMemoryContainer_front .am-review-tile.is-missed  .am-img-wrap::after { background: rgba(245, 166, 35, 0.38); }
#audioMemoryContainer_front .am-review-tile.is-wrong   .am-img-wrap::after { background: rgba(239, 59, 59, 0.32); }
#audioMemoryContainer_front .am-review-tile.is-wrong-count .am-img-wrap::after { background: rgba(239, 59, 59, 0.32); }
#audioMemoryContainer_front .am-review-tile.is-neutral .am-img-wrap::after { background: rgba(40, 40, 40, 0.45); }

#audioMemoryContainer_front .am-review-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

#audioMemoryContainer_front .is-correct .am-review-badge { background: #34b44a; }
#audioMemoryContainer_front .is-missed  .am-review-badge { background: #f5a623; }
#audioMemoryContainer_front .is-wrong   .am-review-badge { background: #ef3b3b; }
#audioMemoryContainer_front .is-wrong-count .am-review-badge { background: #ef3b3b; }

/* ---- Count recall (2026-09-21; spec 5d6, 5e2f; Figma count question and answer screens) ---- */

/* Selection: the chosen count as a large number over a tinted image */
#audioMemoryContainer_front .am-img-wrap { position: relative; }
#audioMemoryContainer_front .am-count {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(120, 30, 110, 0.55);
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(2rem, 9vw, 3.25rem);
  font-weight: 700;
  pointer-events: none;
}
#audioMemoryContainer_front .is-count-recall .am-tile.is-selected .am-count { display: flex; }
#audioMemoryContainer_front .is-count-recall .am-tile.is-selected .am-img-wrap { box-shadow: 0 0 0 2px #b04aa0; }

/* Review: count chips at the image's bottom-left. Figma
   (prompts/End User Features/Memory Games/Audio_Memory_Count_Figma_Screencap_20260921.png):
   the correct count first outlined green, then the player's wrong count outlined red. */
#audioMemoryContainer_front .am-chips {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 1;
  display: flex;
  gap: 4px;
}
#audioMemoryContainer_front .am-chip {
  padding: 1px 8px;
  border: 2px solid #1f1f1f;
  border-radius: 999px;
  background: #fff;
  color: #1f1f1f;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}
/* The count that was spoken: what the player should take away from the review. */
#audioMemoryContainer_front .am-chip.is-correct {
  border-color: #28a745;
  color: #1a7431;
}
/* What the player actually entered, when it was wrong. */
#audioMemoryContainer_front .am-chip.is-yours {
  border-color: #dc3545;
  color: #b02a37;
}

/* Ordered: your order vs correct order, side by side */
#audioMemoryContainer_front .am-order-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: left;
}

#audioMemoryContainer_front .am-order-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #444;
  margin: 0 0 6px;
}

#audioMemoryContainer_front .am-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#audioMemoryContainer_front .am-order-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #e3e3e3;
  background: #fff;
  font-size: 0.8rem;
}

#audioMemoryContainer_front .am-order-row img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: none;
}

#audioMemoryContainer_front .am-order-num {
  width: 14px;
  flex: none;
  color: #666;
  font-weight: 600;
}

#audioMemoryContainer_front .am-order-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#audioMemoryContainer_front .am-order-row.is-match    { background: #d7f3d9; border-color: #8fd79a; font-weight: 600; }
#audioMemoryContainer_front .am-order-row.is-mismatch { background: #ffe1e1; border-color: #f4a9a9; font-weight: 600; }