/*
 * Road Directions - web player styles (2026-09-25)
 *
 * Spec: prompts/End User Features/Memory Games/memory_games_road_directions.md 5c-5f.
 * Design: Figma "Road Direction Game Flow - Direction Recall" and "Direction recall results".
 *
 * The listening screen is the shared one styled in audio-memory.css. Everything here is scoped
 * under #audioMemoryContainer_front .rd-*, so no other deck is affected.
 */

#audioMemoryContainer_front .rd-recall {
  --rd-row-h: 46px;
  --rd-row-gap: 8px;
  --rd-green: #00B58C;  /* 2026-10-06: brand green, replacing the darker road-sign green */
  --rd-ink: #25314c;
  --rd-good: #22a45d;
  --rd-bad: #e5484d;
  --rd-warn: #f5a524;
  /* Route list height: three and a half rows, the half row signalling more (spec 5d7a). Taller
     on desktop, below. */
  --rd-route-h: calc(3.5 * var(--rd-row-h) + 3 * var(--rd-row-gap));
  --rd-pick-gap: 18px;      /* direction signs -> street signs */
  --rd-grid-row-gap: 11px;  /* between rows of street signs */
  --rd-grid-col-gap: 8px;
  /* Two blocks, the route and the picker, spread evenly over the space down to the Check button
     (2026-10-06). fitRecallHeight() measures that space into --rd-recall-height; until it runs,
     or on a viewport too short to measure, the blocks simply stack. `gap` is the least space
     ever left between them. */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 16px;
  min-height: var(--rd-recall-height, 0px);
  box-sizing: border-box;
}

#audioMemoryContainer_front .rd-block {
  display: flex;
  flex-direction: column;
}

#audioMemoryContainer_front .rd-block-route {
  gap: 12px;
}

#audioMemoryContainer_front .rd-block-pick {
  gap: var(--rd-pick-gap);
}

/* Desktop (2026-10-06): more air around the direction signs and between street signs, and a
   taller route panel. The panel only grows as far as the window can hold, up to six rows, so a
   short laptop window does not push the street signs under the Check button. */
@media (min-width: 769px) {
  #audioMemoryContainer_front .rd-recall {
    --rd-pick-gap: 24px;
    --rd-grid-row-gap: 12px;
    --rd-grid-col-gap: 12px;
  }
}

@media (min-width: 769px) and (min-height: 800px) {
  #audioMemoryContainer_front .rd-recall {
    --rd-route-h: calc(4 * var(--rd-row-h) + 3 * var(--rd-row-gap));
  }
}

@media (min-width: 769px) and (min-height: 880px) {
  #audioMemoryContainer_front .rd-recall {
    --rd-route-h: calc(5 * var(--rd-row-h) + 4 * var(--rd-row-gap));
  }
}

@media (min-width: 769px) and (min-height: 960px) {
  #audioMemoryContainer_front .rd-recall {
    --rd-route-h: calc(6 * var(--rd-row-h) + 5 * var(--rd-row-gap));
  }
}

#audioMemoryContainer_front .rd-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--rd-ink);
  margin: 4px 0 0;
}

/* ---- YOUR ROUTE panel (spec 5c2, 5d7) ---------------------------------------------------- */

#audioMemoryContainer_front .rd-panel {
  background: #d6e8fb;
  border-radius: 16px;
  padding: 10px 10px 12px;
}

#audioMemoryContainer_front .rd-panel-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--rd-ink);
  margin: 0 2px 8px;
}

/* Fixed height: three and a half rows, so the half row signals more; scrolls with no visible
   bar; fixed rather than content-sized so the signs below never move (spec 5d7a-d). */
#audioMemoryContainer_front .rd-route {
  list-style: none;
  margin: 0;
  padding: 2px;
  height: var(--rd-route-h);
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--rd-row-gap);
}

#audioMemoryContainer_front .rd-route::-webkit-scrollbar {
  display: none;
}

/* Fade the cut edge while there is more below (the same cue the Audio Memory grid uses). */
#audioMemoryContainer_front .rd-route.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

#audioMemoryContainer_front .rd-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--rd-row-h);
  padding: 0 10px;
  background: #fff;
  border-radius: 12px;
  box-sizing: border-box;
}

#audioMemoryContainer_front .rd-placeholder {
  justify-content: center;
  font-size: 0.8rem;
  color: var(--rd-ink);
}

#audioMemoryContainer_front .rd-helper {
  flex: 0 0 auto;
  text-align: center;
  font-size: 0.75rem;
  color: #5a6478;
}

#audioMemoryContainer_front .rd-row-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#audioMemoryContainer_front .rd-row .rd-dir-icon {
  flex: 0 0 auto;
  width: 30px;
  height: auto;
}

#audioMemoryContainer_front .rd-row .rd-street,
#audioMemoryContainer_front .rd-street-slot {
  flex: 1 1 auto;
  min-width: 0;
}

#audioMemoryContainer_front .rd-row-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 1px solid #d0d5dd;
  border-radius: 50%;
  background: #fff;
  color: #9aa3b2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1rem;
}

/* ---- Street sign: green, white edge, name with the type small and raised (Figma) ----------
   The white inner edge and thin green outer line were removed on 2026-10-06 and restored the
   same day: they are what makes the block read as a street sign. */

#audioMemoryContainer_front .rd-street {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 3px 10px;
  background: var(--rd-green);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--rd-green);
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#audioMemoryContainer_front .rd-street-type {
  font-size: 0.55em;
  margin-top: 0.15em;
}

/* ---- Direction signs (spec 5c3) ----------------------------------------------------------- */

/* 2026-10-06: capped at the art's designed width (108px, sign_*.svg). With 1fr columns the signs
   stretched to fill the row and drew about a third larger than designed. They still shrink on a
   narrow phone. */
#audioMemoryContainer_front .rd-dirs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 108px));
  justify-content: center;
  gap: 10px;
}

#audioMemoryContainer_front .rd-dir {
  border: none;
  background: none;
  padding: 0;
  border-radius: 12px;
  transition: transform 0.1s;
}

#audioMemoryContainer_front .rd-dir img {
  display: block;
  width: 100%;
  height: auto;
}

#audioMemoryContainer_front .rd-dir:active {
  transform: scale(0.97);
}

/* The pending step's direction (spec 5d1b: tap another to change it). */
#audioMemoryContainer_front .rd-dir.is-active {
  outline: 3px solid var(--rd-ink);
  outline-offset: 2px;
}

#audioMemoryContainer_front .rd-dir:disabled {
  opacity: 0.45;
}

/* A street tapped before a direction: the direction signs pulse, the cue to start there
   (spec 5d1d). */
#audioMemoryContainer_front .rd-dirs.is-pulsing .rd-dir:not(:disabled) {
  animation: rd-pulse 0.6s ease-in-out;
}

@keyframes rd-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

/* ---- Street grid (spec 5c4, 5e) ----------------------------------------------------------- */

#audioMemoryContainer_front .rd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rd-grid-row-gap) var(--rd-grid-col-gap);
}

#audioMemoryContainer_front .rd-tile {
  border: none;
  background: none;
  padding: 2px;
  min-width: 0;
}

#audioMemoryContainer_front .rd-tile .rd-street {
  width: 100%;
  font-size: 1.05rem;
  padding: 6px 8px;
  box-sizing: border-box;
}

/* Signs stay at full strength while waiting for a direction (spec 5d1d); only the cursor says
   they are not tappable yet. */
#audioMemoryContainer_front .rd-grid.is-waiting .rd-tile {
  cursor: default;
}

/* ---- Review (spec 5f) --------------------------------------------------------------------- */

/* In review the picker is gone and the route block sits at the top, not spread out: the result
   panel covers the lower part of the screen. */
#audioMemoryContainer_front .rd-recall.is-review {
  justify-content: flex-start;
  min-height: 0;
}

#audioMemoryContainer_front .rd-recall.is-review .rd-block-pick {
  display: none;
}

/* In review the list fills the space down to the result panel; fitReviewPanel() measures it
   (2026-09-25). Never shorter than three and a half rows. Until it is measured it keeps the
   recall screen's height. */
#audioMemoryContainer_front .rd-recall.is-review .rd-route {
  height: max(calc(3.5 * var(--rd-row-h) + 3 * var(--rd-row-gap)),
              var(--rd-review-height, var(--rd-route-h)));
}

#audioMemoryContainer_front .rd-review-badge {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

#audioMemoryContainer_front .rd-review-row.is-correct .rd-review-badge {
  background: var(--rd-good);
}

/* 2026-10-06: a review row has no remove button, so it reserves that button's space (28px plus
   the 10px gap). Without this the street sign stretched into the gap, and the same street was
   wider in review than it had been a moment earlier in the route. */
#audioMemoryContainer_front .rd-review-row {
  padding-right: 48px;
}

/* Inset rather than outline, so the scroll area cannot clip it. */
#audioMemoryContainer_front .rd-review-row.is-wrong {
  box-shadow: inset 0 0 0 2px var(--rd-bad);
}

#audioMemoryContainer_front .rd-review-row.is-wrong .rd-review-badge {
  background: var(--rd-bad);
}

/* The correct step, under a wrong one: indented, green edge, amber badge, smaller signs. */
#audioMemoryContainer_front .rd-correction-row {
  margin-left: 22px;
  height: calc(var(--rd-row-h) - 8px);
  box-shadow: inset 0 0 0 2px var(--rd-good);
}

#audioMemoryContainer_front .rd-correction-row .rd-review-badge {
  background: var(--rd-warn);
}

#audioMemoryContainer_front .rd-correction-row .rd-dir-icon {
  width: 22px;
}

#audioMemoryContainer_front .rd-correction-row .rd-street {
  font-size: 0.75rem;
  flex: 0 1 auto;
}

/* Only the part that was wrong is marked (spec 5f2c): red on the player's row, green on the
   correction beneath it. */
#audioMemoryContainer_front .is-wrong-part {
  box-shadow: 0 0 0 3px var(--rd-bad);
  border-radius: 6px;
}

#audioMemoryContainer_front .rd-street.is-wrong-part {
  box-shadow: 0 0 0 1px var(--rd-green), 0 0 0 4px var(--rd-bad);
}

#audioMemoryContainer_front .is-fix-part {
  box-shadow: 0 0 0 3px var(--rd-good);
  border-radius: 6px;
}

#audioMemoryContainer_front .rd-street.is-fix-part {
  box-shadow: 0 0 0 1px var(--rd-green), 0 0 0 4px var(--rd-good);
}