/* Memory match. The board is a grid of square cards that flip; nothing here scrolls sideways. */
.mem-board{
  display:grid;
  grid-template-columns:repeat(var(--mem-cols,4),minmax(0,1fr));
  gap:8px;
  max-width:min(100%,560px);
  margin:14px auto 0;
}
.mem-card{
  position:relative;
  aspect-ratio:1/1;
  border:0;padding:0;background:transparent;
  cursor:pointer;
  perspective:700px;
  -webkit-tap-highlight-color:transparent;
}
.mem-card > span{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  backface-visibility:hidden;
  transition:transform 260ms var(--ease);
}
.mem-back{
  background:linear-gradient(150deg,var(--blue),var(--blue-dark));
  box-shadow:var(--e1);
}
/* the plain back carries the same mark as the app, drawn in CSS so it needs no asset */
.mem-back::after{
  content:'';width:38%;height:38%;border-radius:50%;
  border:3px solid rgba(255,255,255,.55);
  border-right-color:transparent;border-bottom-color:transparent;
  transform:rotate(-35deg);
}
.mem-front{
  background:var(--surface);
  border:1px solid var(--line);
  transform:rotateY(180deg);
  padding:6px;
  overflow:hidden;
}
.mem-card.up .mem-back{transform:rotateY(180deg)}
.mem-card.up .mem-front{transform:rotateY(360deg)}
.mem-card.done{cursor:default}
.mem-card.done .mem-front{
  border-color:transparent;
  background:var(--green-bg);
  box-shadow:inset 0 0 0 2px var(--green);
}
.mem-card:active{transform:scale(.98)}
.mem-card.done:active{transform:none}

.mem-flag{width:100%;height:100%;object-fit:contain;border-radius:4px}
.mem-text{
  font-size:13px;line-height:1.25;text-align:center;color:var(--text);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
}
.mem-text.big{font-size:28px;font-weight:500}
.mem-text.small{font-size:11px;-webkit-line-clamp:6}
.mem-note{
  min-height:34px;margin:14px auto 0;
  display:flex;justify-content:center;text-align:center;
}
.mem-note .pill{white-space:normal;height:auto;min-height:30px;padding:6px 12px;line-height:1.35}

@media (min-width:760px){
  .mem-board{gap:10px;max-width:620px}
  .mem-text{font-size:15px}
  .mem-text.small{font-size:12px}
}