/* Neuriosity — Memory Market playfield.
   Shared chrome lives in ../_shared/game-kit.css */

.mm-game .neu-status:empty { display: none; }

.mm-band {
  margin: 0;
  flex: 0 0 auto;
  color: var(--ink-soft, #526b8e);
  font-size: calc(var(--gu) * 2.6);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mm-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

/* ---------- the list ---------- */

.mm-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--gu) * 1.4);
  margin: 0;
  padding: calc(var(--gu) * 3) calc(var(--gu) * 4.5);
  max-height: 100%;
  list-style: none;
  background: #fff;
  border: calc(var(--gu) * 0.3) solid rgba(105, 5, 10, 0.18);
  border-radius: calc(var(--gu) * 2);
}

.mm-list li {
  display: flex;
  align-items: center;
  gap: calc(var(--gu) * 1.6);
  font-size: calc(var(--gu) * 4.6);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.mm-list__dot {
  flex: 0 0 auto;
  width: calc(var(--gu) * 2.6);
  height: calc(var(--gu) * 2.6);
  border-radius: 50%;
}

/* ---------- the amendment ---------- */

.mm-cross {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gu) * 1);
  padding: calc(var(--gu) * 3) calc(var(--gu) * 5);
  background: #fff;
  border: calc(var(--gu) * 0.3) dashed #69050a;
  border-radius: calc(var(--gu) * 2);
}

.mm-cross p {
  margin: 0;
  color: #69050a;
  font-size: calc(var(--gu) * 2.6);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mm-cross strong {
  font-size: calc(var(--gu) * 5.2);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: line-through;
  text-decoration-thickness: calc(var(--gu) * 0.35);
}

/* ---------- the shelf ---------- */

.mm-shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: calc(var(--gu) * 1.2);
  width: 100%;
  height: 100%;
}

.mm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gu) * 0.4);
  min-width: 0;
  min-height: 0;
  padding: calc(var(--gu) * 0.6);
  color: var(--navy, #062b63);
  font: inherit;
  background: #fff;
  border: calc(var(--gu) * 0.3) solid rgba(105, 5, 10, 0.16);
  border-radius: calc(var(--gu) * 1.4);
  cursor: pointer;
}

.mm-item__art {
  width: auto;
  height: 62%;
  min-height: 0;
  fill: currentColor;
  stroke: rgba(0, 0, 0, 0.32);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.mm-item__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: calc(var(--gu) * 2.5);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.mm-item:hover { border-color: #69050a; }
.mm-item:focus-visible { outline: calc(var(--gu) * 0.5) solid #69050a; outline-offset: calc(var(--gu) * 0.2); }

.mm-item.is-found {
  background: rgba(14, 168, 90, 0.16);
  border-color: var(--green, #0ea85a);
  cursor: default;
}

.mm-item.is-wrong {
  background: rgba(241, 95, 109, 0.2);
  border-color: var(--coral, #f15f6d);
}

/* What was still on the list when the trip ended. */
.mm-item.is-answer { border-color: var(--green, #0ea85a); border-style: dashed; }

@media (prefers-reduced-motion: reduce) {
  .mm-item { transition: none; }
}