.trace-card {
  display: flex;
  align-items: flex-end;
  background: linear-gradient(145deg, rgba(108, 255, 217, .05), transparent 55%), var(--panel);
  transition: transform .2s, border-color .2s;
}
.trace-card:hover { transform: translateY(-4px); border-color: var(--mint); }
.trace-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(108,255,217,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(108,255,217,.055) 1px,transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(to bottom left,#000,transparent 78%);
  mask-image: linear-gradient(to bottom left,#000,transparent 78%);
}
.trace-grid:before,.trace-grid:after,.trace-grid i,.trace-grid b,.trace-grid em {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background: var(--mint);
  box-shadow: 0 0 22px rgba(108,255,217,.7);
}
.trace-grid:before { right: 180px; top: 90px; }
.trace-grid:after { right: 150px; top: 90px; }
.trace-grid i { right: 120px; top: 90px; }
.trace-grid b { right: 120px; top: 120px; }
.trace-grid em { right: 120px; top: 150px; background: var(--pink); box-shadow: 0 0 22px var(--pink); }
@media (min-width: 761px) {
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trace-grid:before,.trace-grid:after,.trace-grid i,.trace-grid b,.trace-grid em {
    width: 36px;
    height: 36px;
  }
  .trace-grid:before { right: 250px; top: 72px; }
  .trace-grid:after { right: 208px; top: 72px; }
  .trace-grid i { right: 166px; top: 72px; }
  .trace-grid b { right: 166px; top: 114px; }
  .trace-grid em { right: 166px; top: 156px; }
}